如何使用webpack和babel编译js文件为同时支持script引入和import导入的库

前置准备 #

假设你的源文件为src/Demo.js，是单独的JS类，示例代码如下：

// src/Demo.js
class Demo {
  sayHi() {
    console.log('hello from demo library')
  }
}
export default Demo

步骤1：安装依赖 #

安装webpack基础依赖：

npm install webpack webpack-cli --save-dev

步骤2：编写webpack配置 #

在项目根目录新建webpack.config.js，核心配置output.library为UMD格式即可同时兼容全局引入、ES模块、CommonJS模块三种调用方式：

const path = require('path')

module.exports = {
  entry: './src/Demo.js', // 替换为你的单JS类文件实际路径
  output: {
    path: path.resolve(__dirname, 'demo'), // 输出目录，和你预期的存放路径对应
    filename: 'demo.js', // 输出文件名
    library: {
      name: 'Demo', // script标签引入时，挂载到window上的全局变量名
      type: 'umd', // 开启UMD格式兼容多模块规范
      export: 'default' // 源文件为export default导出时需配置此项，避免引入时需要加.default才能拿到类
    },
    globalObject: 'this' // 修复UMD模式下浏览器环境全局对象指向错误问题
  },
  mode: 'production' // 开发场景可改为development方便调试
}

步骤3：配置打包脚本 #

在package.json的scripts字段中添加打包命令：

{
  "scripts": {
    "build": "webpack"
  }
}

执行npm run build即可在demo/目录下生成最终产物demo.js。

两种使用方式验证 #

1. script标签直接引入 #

<script src='demo/demo.js'></script>
<script>
  // 直接使用全局变量Demo实例化
  const demoInstance = new Demo()
  demoInstance.sayHi()
</script>

2. ES模块导入 #

先在库项目的package.json中配置入口字段，方便其他项目识别引入：

{
  "name": "demo", // 包名，对应import时的包名
  "main": "demo/demo.js",
  "module": "demo/demo.js"
}

其他项目安装该包后即可直接导入使用：

import Demo from 'demo'
const demoInstance = new Demo()
demoInstance.sayHi()

可选优化 #

如果需要兼容更低版本浏览器，可添加babel-loader对源码做ES语法转译，按需配置即可。

内容的提问来源于stack exchange，提问作者Sunny