如何使用webpack4构建自己的js库？

Question

我使用webpack4构建自己的js库，并将构建js添加到我的页面中。

当我在控制台上键入window.wwsLogin（libraryName）时，结果显示为be Module {default: {…}, __esModule: true, Symbol(Symbol.toStringTag): "Module"}

和window.wwsLogin.default是正确的输出，但是我只想与window.wwsLogin一起使用，如何解决？

这是我的webpack配置：

entry: './lib/index.js',

output: {
    filename: 'index.js',
    libraryTarget: 'umd',
    library: 'wwsLogin',
    umdNamedDefine: true,
    globalObject: "typeof self !== 'undefined' ? self : this",
},

resolve: {
    extensions: ['.js'],
},

mode: 'production',

module: {
    rules: [
        {
            test: /\.js$/,
            exclude: /node_modules/,
            use: 'babel-loader',
        },
    ],
},

这是我的.babelrc：

{
"presets": ["@babel/env"],
"plugins": ["@babel/plugin-proposal-class-properties", "@babel/plugin-transform-runtime",  "add-module-exports"]}

，我使用es6导入和导出。

Answer 1

您的库似乎可以作为模块使用，因此可以使用import在其他代码中使用它。如果希望window.wwsLogin在全局范围内可用，则必须首先添加它，您可以从库代码中进行添加。

向您的图书馆添加类似的内容

   window.wwsLogin = this

（取决于您的库的外观）