如何用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

(取决于您的库的外观)