使用 webpack 创建库时的 name 与 name.default答案

【问题标题】：name vs. name.default when creating a library with webpack使用 webpack 创建库时的 name 与 name.default
【发布时间】：2018-08-16 19:32:59
【问题描述】：

有没有办法打包一个库，所以我可以将其入口点简单地称为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 间接。我做错了什么？

【问题讨论】：

标签： webpack

【解决方案1】：

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

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

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

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

【讨论】：

我假设您的意思是将libraryTarget 更改为"commonjs-module"？我试过了，然后我得到ReferenceError: module is not defined 和ReferenceError: dk is not defined
不，我没有提到，我的意思是你的模块是如何创建的。
那我恐怕没明白你的意思。如何创建我的模块以实现我的目标？
放上google如何创建es模块和commonjs模块。

【解决方案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;

【讨论】：