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
    }
};

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

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

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

Answer 1

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

注意：如果使用umd，您可以使用属性commonjs，commonjs2，amd和root将对象指定为外部值，以便为每种导入类型设置不同的值。

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

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

使用webpack释放React库

1 个答案: