webpack打包js为npm包或者sdk支持cmmonjs引入和浏览器引入中export default问题

版本

webpack:5.61.0

打包的js文件内容

function openIframe (opts = {}) {
    // const { width = '200px', height = '400px', el = "body" } = opts || {}
    // const iframe = document.createElement('iframe')
    // iframe.width = width
    // iframe.height = height
    // iframe.src = 'https://baidu.com'
    // document.querySelector(el).appendChild(iframe)
    console.log('node调用>>>', 222);
}

export default openIframe

问题

打包后调用方法需要加个default才能调用到，ex:hoo.default(),

解决

修改webpack配置文件

1.添加library.export=‘default’ 解决使用es6的默认导出export default 在使用的时候需要加default才能访问到属性
2.添加globalObject:‘this’. 支持node环境的commjs方式引入

const path = require('path')

module.exports = {
    entry: './index.js',
    mode: 'production',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js',
        library: {
            name: 'hoo',
            type: 'umd',
            export: 'default'  // 添加这个解决es6的export default导出属性要加default才能访问到问题
        },
        globalObject: 'this' //添加这个才能支持node的commonjs
    },
    module: {
        rules: [{
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['@babel/preset-env']
                }
            }
        }]
    }
}

外部化lodash

如果执行 webpack，你会发现创建了一个体积相当大的文件。如果你查看这个文件，会看到 lodash 也被打包到代码中。在这种场景中，我们更倾向于把 lodash 当作 peerDependency。也就是说，consumer(使用者) 应该已经安装过 lodash 。因此，你就可以放弃控制此外部 library ，而是将控制权让给使用 library 的 consumer 。参考：https://webpack.docschina.org/guides/author-libraries/#externalize-lodash

const path = require('path')

module.exports = {
    entry: './index.js',
    mode: 'production',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js',
        library: {
            name: 'hoo',
            type: 'umd',
            export: 'default'
        },
        globalObject: 'this' //添加这个才能支持node的commonjs
    },
    module: {
        rules: [{
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['@babel/preset-env']
                }
            }
        }]
    },
    // 外部分lodash
    externals: {
        lodash: {
            commonjs: 'lodash',
            commonjs2: 'lodash',
            amd: 'lodash',
            root: '_'
        }
    }
}

这意味着你的 library 需要一个名为 lodash 的依赖，这个依赖在 consumer 环境中必须存在且可用。