如何用TypeScript+Webpack构建可直接script引入的ES5 IIFE类库

不需要依赖Babel即可输出符合要求的IIFE格式单JS文件，核心是正确配置TypeScript编译选项和webpack输出规则，具体步骤如下：

1. 配置TypeScript编译规则 #

在项目根目录的tsconfig.json中写入以下配置，直接由TS编译器将高级语法转译为ES5规范代码，无需Babel做语法转换：

{
  "compilerOptions": {
    "target": "ES5",
    "module": "None",
    "strict": true,
    "outDir": "./dist"
  },
  "include": ["src/**/*"]
}

配置说明：target: "ES5"会自动将TS类、箭头函数等ES6+语法转译为ES5兼容实现，module: "None"会让TS不输出任何模块加载相关代码，避免和webpack的打包逻辑冲突。

2. 配置webpack打包规则 #

在webpack.config.js中重点配置output的library属性，指定输出格式为IIFE、并将类挂载到全局作用域：

const path = require('path');

module.exports = {
  entry: './src/index.ts',
  mode: 'production',
  resolve: {
    extensions: ['.ts', '.js']
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  output: {
    filename: 'foo.js',
    path: path.resolve(__dirname, 'dist'),
    library: {
      name: 'Foo', // 全局挂载的变量名，对应你要实例化的Foo
      type: 'iife', // 指定输出为IIFE格式
      export: 'default' // 对应入口文件的默认导出
    },
    clean: true
  }
};

3. 入口文件写法 #

在src/index.ts中编写类逻辑并正确导出：

class Foo {
  constructor() {
    // 初始化逻辑
  }
  testMethod() {
    console.log('method called');
  }
}

export default Foo;

常见注意事项 #

• Babel不是IIFE输出的必需依赖：IIFE是webpack原生支持的输出格式，不需要Babel做额外转换。只有当你需要兼容极低版本浏览器、补充ES5以上的内置API polyfill（比如Promise、Array.prototype.includes）时，才需要按需引入core-js类的polyfill方案，这和IIFE格式输出本身无关。
• HTML中script标签不要用自闭合写法，必须写完整闭合标签，否则会出现加载异常：

<!-- 正确写法 -->
<script src="foo.js" type="text/javascript"></script>
<!-- 错误写法 不要使用 -->
<script src="foo.js" type="text/javascript" />

• 如果你用命名导出而非默认导出，只需要调整webpack配置中library.export的值为对应导出的名称即可。

完成配置后执行webpack打包命令，生成的dist/foo.js引入页面后，就可以直接通过var f = new Foo()完成实例化。

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