Как создать мою собственную библиотеку JS с WebPack4?

Question

Я использую webpack4 для создания своей собственной библиотеки js и добавляю сборку js на свою страницу.

когда я набираю window.wwsLogin (libraryName) на консоли, получилось be Module {default: {…}, __esModule: true, Symbol(Symbol.toStringTag): "Module"}

и window.wwsLogin.default - правильный вывод, но я просто хочу использовать его с window.wwsLogin, как это исправить?

это моя конфигурация веб-пакета:

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

(в зависимости от того, как выглядит ваша библиотека)