代码之家 › 专栏 › 技术社区 › thebjorn

使用webpack创建库时的名称与名称。默认值

webpack

-1

thebjorn · 技术社区 · 7 年前

foo 而不是 foo.default ?

结构:

.
|-- src
|   |-- index.js
|-- webpack.config.js
|-- dist
|   `-- index.html
|-- package.json

./src/索引.js

import jQuery from 'jquery';
var dk = function dk(selector) {
    return document.querySelector(selector);
};

Object.assign(dk, {
    __version__: 42,

    ready(fn) {
        jQuery(fn);
    }
});

export default dk;

./webpack.config.js文件包

var path = require('path');

module.exports = {
    mode: 'development',    
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'dk.js',
        library: 'dk',
        libraryTarget: "var"
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /(node_modules)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        cacheDirectory: true,
                        presets: ['env'],
                    }
                }
            }
        ]
    },
    externals: {
        jquery: 'jQuery',
    }
};

<!doctype html>
<html>
<head>
    <script
        src="https://code.jquery.com/jquery-3.1.0.js"
        integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="
        crossorigin="anonymous"></script>
</head>
<body>
    <h1>hello world</h1>

    <script src="dk.js"></script>
    <script>
        var dk = dk.default;  // <=== HERE: why do I need this line?

        dk.ready(function () {
            dk('h1').innerText = 'so long and thanks for all the fish';
        });
    </script>
</body>
</html>

我相信我已经按照文件做了所有的事情,但是我没想到 .default 间接的。我做错什么了?

2 回复 | 直到 7 年前

PlayMa256 7 年前

由于创建的方式,您需要执行dk.default。

DK是一个es模块,因此它有一个默认导出和命名导出。与common.js不同,您需要作为默认值导入。

{_esmodule: true|false, default: ....} 它描述了你的模块。

这与webpack无关,您只需将模块打包为commonjs,而不是esmodule。

-1

thebjorn 7 年前

output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'dk.js',
    library: 'dk',
    libraryTarget: "umd",
    libraryExport: 'default',
    umdNamedDefine: true
},

它和这个错误报告有关 https://github.com/webpack/webpack/issues/3929 解决方案是基于这个PR的代码 https://github.com/dharmaprotocol/dharma.js/pull/145

更新: 如果其他人和我一样无知,可以使用原始输出部分 index.js 从