如果你要编写一些公共库提供给其他人引用,你希望以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库来进行降级。
源文件:
输出文件:
引入: