javascript - 使用 webpack 发布 React 库

Question

我创建了一个以 React 作为其外部依赖项的库。该库以 UMD 形式发布:

module.exports = {
    entry: [
        path.join(__dirname, 'src', 'MyLib.js')
    ],
    output: {
        path: path.join(__dirname, 'build'),
        libraryTarget: 'umd',
        library: 'MyLib',
        filename: 'my-lib.js'
    },
    externals: {
        react: true,
        'react-dom': true
    }
};

现在我希望能够在以下场景中使用该库:

1. 在代码中需要库，假设还需要 React。
2. 将库作为脚本包含在 HTML 文件中，假设 React 可用作全局变量。

第一点实际上很简单 - 它现在应该可以正常工作。但我不知道如何实现第二点而不打破第一点。我尝试使用 ProvidePlugin 但没有成功。

Answer 1

回答我自己的问题:我需要以不同的方式指定external。根据 webpack 文档:

Note: If using umd you can specify an object as external value with property commonjs, commonjs2, amd and root to set different values for each import kind.

所以整个对象应该是这样的:

externals: {
    'react': {
        'commonjs': 'react',
        'commonjs2': 'react',
        'amd': 'react',
        'root': 'React'
    }
}