将打字稿捆绑输出在单个文件中 [英] 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:
-
安装Webpack
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屋!