在单个文件中捆绑打字稿输出

Question

我在源文件夹中的ecmascript 2015模块模式后面有一堆打字稿文件.我有tsconfig设置将转换后的文件输出到lib文件夹.这很好用.但有没有办法将它们捆绑成一个可以在浏览器中使用的sigle文件？我希望我的模块可以通过npm获得,也可以作为脚本标签.

有关详细信息,请参阅我的虚拟github项目.尝试了gulp-typescript,concat,uglify方式,但是徒劳无功.

Answer 1

使用webpack编译TypeScript并创建一个bundle:

1. 安装webpack

   > npm install webpack ts-loader --save-dev
   

2. 创建webpack.config.js

   const path = require('path');
   module.exports = {
      entry: "./src/index.ts",
      output: {
          filename: "bundle.js",
          path: path.resolve(__dirname, 'dist')
      },
      resolve: {
          extensions: [".webpack.js", ".web.js", ".ts", ".js"]
      },
      module: {
          rules: [{ test: /\.ts$/, loader: "ts-loader" }]
      }
   }
   

3. 运行webpack

   > webpack