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

【问题标题】：Bundle typescript output in single file将打字稿输出捆绑在单个文件中
【发布时间】：2017-12-20 03:02:28
【问题描述】：

我在源文件夹中有一堆遵循 ecmascript 2015 模块模式的打字稿文件。我有 tsconfig 设置将转译的文件输出到 lib 文件夹。效果很好。但是有没有办法将它们捆绑在一起形成一个可以在浏览器中使用的文件？我希望我的模块可以通过 npm 使用，也可以作为脚本标签使用。

详情请参阅my dummy github project。尝试了 gulp-typescript, concat, uglify 的方式，但没有成功。

【问题讨论】：

标签： javascript node.js typescript module bundle

【解决方案1】：

使用 webpack 和 ts-loader 编译 TypeScript 并创建单个包：

安装 webpack

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

创建 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" }]
   }
}

运行 webpack
```
> webpack
```
您可能还需要安装 webpack-cli（运行webpack 命令时消息会告诉您）
```
> npm install webpack-cli
```

随着配置选项随着时间的推移而变化，请参阅有关 webpack 和 ts-loader 的文档。

【讨论】：

我实际上是在创建一个库。所以这绝对是一个好的开始。但是我需要将转译的 js 和捆绑的 js 的位置分开。还需要同时支持节点和浏览器环境。我正在考虑合并将创建 js 的 gulp，然后应用带有高级选项的 webpack 从 js 创建库包，而不需要 ts-loader。你有什么看法？