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

时间:2019-04-25 15:35:36

标签: javascript webpack

我使用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"]}

this is the console output

,我使用es6导入和导出。

1 个答案:

答案 0 :(得分:0)

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

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

   window.wwsLogin = this

(取决于您的库的外观)