1. Webpack：
使用 Webpack 可以将 TypeScript 代码打包成一个或多个 JavaScript 文件，并处理模块依赖关系。
- 安装相关依赖：
npm install webpack webpack-cli typescript ts-loader --save-dev
- 创建 webpack.config.js 文件：
const path = require('path');
module.exports = {
entry: './src/index.ts',
module: {
rules: [
{
test: /\.ts$/,
use: 'ts-loader',
exclude: /node_modules/
}
]
},
resolve: {
extensions: ['.ts', '.js']
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
- 运行构建命令：
npx webpack
2. Parcel：
Parcel 是一个零配置的打包工具，它能够直接处理 TypeScript 代码。
- 安装 Parcel 和 TypeScript：
npm install parcel typescript --save-dev
- 在 package.json 中添加脚本：
"scripts": {
"start": "parcel index.html",
"build": "parcel build index.html"
}
- 创建 index.html 文件并运行：
npm start
3. Rollup：
Rollup 是一个 JavaScript 模块打包工具，也可以用于构建 TypeScript 项目。
- 安装相关依赖：
npm install rollup rollup-plugin-typescript2 --save-dev
- 创建 rollup.config.js 文件：
import typescript from 'rollup-plugin-typescript2';
export default {
input: 'src/index.ts',
output: {
file: 'dist/bundle.js',
format: 'esm'
},
plugins: [typescript()]
};
- 运行构建命令：
npx rollup -c
这些是一些常见的整合 TypeScript 的构建工具的示例。选择合适的构建工具通常取决于项目的需求和团队的偏好。在整合构建工具时，确保理解相关文档，并根据项目的特点进行配置。
转载请注明出处：http://www.zyzy.cn/article/detail/4727/TypeScript