webpack 输出 esm 模块--@purtuga/esm-webpack-plugin

webpack5之前都只支持 amd、commonjs、umd 模块的打包输出。但是有的时候我们可能需要输出 es 模块与其他平台做集成，我们要怎么做呢？不用担心，我们能遇到的大多数问题都有人趟过坑了，都能找到答案。当然 rollup 对 esm 是很友好。

就是这个啦，@purtuga/esm-webpack-plugin，说到这个的作者我都想笑，他竟然是因为不想学习 rollup 所以就自己写了一个。希望有一天我也能轻描淡写的说这种话。

@purtuga/esm-webpack-plugin 的仓库地址：github.com/purtuga/esm…

安装：

npm i -D @purtuga/esm-webpack-plugin

配置 webpack.config.js

const EsmWebpackPlugin = require("esm-webpack-plugin"); 
module.exports = {
    entry: "index.js",
    output: {
      filename: "consoleUtils.js",
      library: "LIB",
      libraryTarget: "var"
    },
    plugins: [ new EsmWebpackPlugin() ]
}

注意：
library 随便去一个名字都行只要不和导出的关键字冲突就行。libraryTarget 设置 var 或 assign 都行。还有 esm-webpack-plugin 只支持 webpack4.X 并且是 production 环境哦！

这样就已经 OK 了。

因为我是基于 vue.config.js 去配置的，其实也是一样的

configureWebpack: (config) => {
    config.output = Object.assign(config.output, {
      library: "liuxw_esm",
      libraryTarget: "var"
    })
  if(ENV === 'production') {
      config.mode = 'production'
      config.plugins.push(new EsmWebpackPlugin())
  }
}

打包命令就是正常的 vue-cli-service 打包命令，就不用多解释了。

"lib": "vue-cli-service build --target lib --name xxx --dest lib ./src/core/xxx.js"

千万注意，配置前打包出来的是 webpack 本身支持的 umd、commonjs, 文件名称可能是 xxx.common.js 或 xxx.umd.js 等，配完后，打包出来的文件名可能没变，但打开文件内容就已经是 esm 类型的了。我就是其实早就搞好了，看文件名没变还以为没成功，浪费了很多时间，具体还得看内容哦。

还有要注意的点，我们平时开发过程中安装依赖就注意区分是 放在 dependences 下还是 devDependences 下，保持良好的习惯，这样打出来的包体积也小一点漂亮一点。

我是“南丘啊南丘”，希望大家在平凡的日子里好好学习，热爱生活，日日是好日！