将打字稿捆绑输出在单个文件中 [英] Bundle typescript output in single file

问题描述

我在源文件夹的ecmascript 2015模块模式下有一堆打字稿文件.我有tsconfig设置以将已转译的文件输出到lib文件夹.很好但是，是否有任何方法可以将它们捆绑在一起成为可以在浏览器中使用的sigle文件?我希望我的模块可以通过npm获得，也可以作为脚本标签获得.

I have a bunch of typescript files following ecmascript 2015 module pattern in source folder. I have tsconfig setup to output the transpiled files to lib folder. That works good. But is there any way to bundle them together into a sigle file that can be used in the browser? I want my module to be available via npm and also as a script tag.

有关详细信息，请参考我的虚拟github项目.尝试了口头打字，concat，uglify方式，但是徒劳.

Refer to my dummy github project for details. tried the gulp-typescript, concat, uglify way, but in vain.

推荐答案

使用 webpack 和 ts-loader 来编译TypeScript并创建一个单独的包:

Use webpack with ts-loader to compile TypeScript and create a single bundle:

1. 安装Webpack

1. Install 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

Run webpack

> webpack

您可能还需要安装webpack-cli(当您运行webpack命令时，消息将告诉您)

You may also need to install webpack-cli (messages will tell you as you go to run the webpack command)

> npm install webpack-cli

有关配置选项随时间变化的更多信息，请参见webpack和ts-loader上的文档.

See the documentation on webpack and ts-loader for more as configuration options change over time.

这篇关于将打字稿捆绑输出在单个文件中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！