如何将TypeScript库打包为可全局访问的单JS文件适配ES5项目

我来帮你搞定这个问题！要让你的TypeScript库能在纯ES5项目里通过script标签引入，并且用var myRestApi = new RestApi(options)的方式调用，核心是调整Webpack的配置，让它把你的RestApi类暴露到全局的window对象上。具体步骤如下：

1. 修改Webpack配置 #

打开你的Webpack配置文件，在output节点中添加三个关键配置项，告诉Webpack如何把库暴露到全局：

const path = require('path');
module.exports = [{
  entry: './src/public_api.ts',
  module: {
    rules: [{
      test: /\.tsx?$/,
      use: [{ loader : 'ts-loader', options:{ configFile : 'tsconfig.json' } }],
      exclude: /node_modules/
    }]
  },
  resolve: { extensions: ['.ts', '.js', '.tsx'] },
  output: { 
    filename: 'bundle.js', 
    path: path.resolve(__dirname, 'dev'),
    // 全局变量的名称，对应你要调用的`new RestApi(...)`
    library: 'RestApi',
    // 指定把库挂载到window对象上
    libraryTarget: 'window',
    // 因为你的public_api.ts是**命名导出**RestApi，所以要指定导出的成员
    libraryExport: 'RestApi'
  }
}];

配置项说明： #

• library: 'RestApi'：设置全局变量的名称，就是你在script里要用到的RestApi
• libraryTarget: 'window'：明确把这个全局变量挂载到浏览器的window对象上
• libraryExport: 'RestApi'：因为你的public_api.ts是用export { RestApi }的方式导出的（属于命名导出），所以需要指定要暴露的具体成员，这样Webpack才会把RestApi类直接赋值给window.RestApi，而不是一个包含RestApi属性的对象。

2. 验证TypeScript配置（可选） #

你的现有tsconfig.json已经设置了target: "es5"和declaration: true，这完全符合纯ES5项目的需求，不需要额外修改。不过要确保module设置不会影响打包——Webpack会自动处理模块转换，所以commonjs的设置是没问题的。

3. 重新打包并测试 #

运行Webpack打包命令生成新的bundle.js，然后在纯HTML文件中测试：

<!DOCTYPE html>
<html>
<body>
  <script src="./dev/bundle.js"></script>
  <script>
    // 模拟你的配置项
    const options = { /* 你的restApiOptions配置 */ };
    // 现在可以直接全局访问RestApi类了
    var myRestApi = new RestApi(options);
    // 测试调用方法
    myRestApi.setLanguage(1);
  </script>
</body>
</html>

这样就能在纯ES5环境中正常使用你的库了！

额外说明 #

如果之后你想让库同时支持多种模块系统（比如CommonJS、AMD和全局变量），可以把libraryTarget改成umd，这样你的库会更通用，但对于当前纯ES5的需求，window已经完全够用。

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