在单个文件中捆绑打字稿输出
Bundle typescript output in single file
我在源文件夹中有一堆遵循 ecmascript 2015 模块模式的打字稿文件。我有 tsconfig 设置将转换后的文件输出到 lib 文件夹。效果很好。但是有什么方法可以将它们捆绑在一起成为一个可以在浏览器中使用的文件吗?我希望我的模块可以通过 npm 获得,也可以作为脚本标签获得。
详见my dummy github project。尝试了 gulp-typescript, concat, uglify 方法,但是没有用。
使用webpack with 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 的文档。
我在源文件夹中有一堆遵循 ecmascript 2015 模块模式的打字稿文件。我有 tsconfig 设置将转换后的文件输出到 lib 文件夹。效果很好。但是有什么方法可以将它们捆绑在一起成为一个可以在浏览器中使用的文件吗?我希望我的模块可以通过 npm 获得,也可以作为脚本标签获得。
详见my dummy github project。尝试了 gulp-typescript, concat, uglify 方法,但是没有用。
使用webpack with 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 的文档。