Question

是否可以打包一个库，以便我可以将其入口点简单地称为foo而不是foo.default？

我用以下代码创建一个库：

结构：

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

./ src / index.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',
    }
};

./ dist / index.html

<!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间接寻址。我在做什么错了？

Answer 1

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

DK是es模块，因此它具有默认导出并命名为export。与common.js不同，您需要默认导入。

当您需要es模块时，您可以访问描述模块的对象{_esmodule: true|false, default: ....}。

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

Answer 2

我对webpack和模块都还很陌生，但是经过一番深入的搜索之后，我找到了解决方案。.输出部分需要以下所有内容：

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中的最后一行从

更改，则可以使用原始输出部分

export default dk;

到

module.exports = dk;

使用Webpack创建库时的名称vs.name.default

2 个答案: