宅小歪前端攻城师Mobile Debug作者

如果你要编写一些公共库提供给其他人引用，你希望以export的导出形式让对方import引入，那 @purtuga/esm-webpack-plugin 这个插件适合你。

具体配置如下：

1、安装模块

yarn add @purtuga/esm-webpack-plugin -D
或者
npm i -D @purtuga/esm-webpack-plugin

2、编辑webpack.config.js

    2.1、在头部引入模块

const EsmWebpackPlugin = require('@purtuga/esm-webpack-plugin');

  2.2、在 module.exports.output中配置library和libraryTarget，其中libraryTarget必须为var，libaray不能为空，命名随意(变量名规范)。

module.exports = { 
    output: {
        library:"cyjh_soft",
        libraryTarget:"var",
    }
}

2.3、在module.exports.plugins中添加引入的 EsmWebpackPlugin 模块

...
plugins: [
    new EsmWebpackPlugin()
],
...

以上配置即可让输出js保留export信息。

题外，如果你的库中存在class-property写法，还需要引入babel的@babel/plugin-proposal-class-properties库来进行降级。

源文件：

输出文件：

引入：