TypeScript - TypeScript 结合打包工具

一、webpack1、引入通常实际开发中我们都需要使用构建工具对代码进行打包TS 同样也可以结合构建工具一起使用2、使用步骤初始化项目创建 package.json 文件npm init -y依赖配置npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader html-webpack-plugin clean-webpack-plugin依赖说明webpack构建工具 webpackwebpack-cliwebpack 的命令行工具webpack-dev-serverwebpack 的开发服务器typescriptTS 编译器ts-loaderTSTS 加载器用于在 webpack 中编译 TS 文件html-webpack-pluginwebpack 中的 HTML 插件用来自动创建 HTML 文件clean-webpack-pluginwebpack 中的清除插件每次项目构建都会先清除目录创建并配置 webpack.config.js 配置文件constpathrequire(path);constHtmlWebpackPluginrequire(html-webpack-plugin);// 引入 HTML 插件const{CleanWebpackPlugin}require(clean-webpack-plugin);// 引入 clean 插件module.exports{// webpack 中的所有的配置信息都写在 module.exports 中entry:./src/index.ts,// 定义入口文件output:{path:path.resolve(__dirname,dist),// 定义打包后文件的所在目录filename:bundle.js// 定义打包后的文件名称},module:{// 定义 webpack 打包时要使用模块rules:[// 定义加载规则{test:/\.ts$/,// 定义规则生效的文件use:[// 定义 loaderts-loader],exclude:/node_modules/,// 定义排除的文件},],},plugins:[// 定义 webpack 插件newCleanWebpackPlugin(),newHtmlWebpackPlugin({// title: Hello TypeScript,template:./src/index.html}),],resolve:{// 定义引用模块extensions:[.ts,.js]},mode:development};创建并配置 tsconfig.json 配置文件{compilerOptions:{target:ES2015,module:ES2015,strict:true}}在 package.json 配置文件中添加如下配置{scripts:{test:echo \Error: no test specified\ exit 1,build:webpack,start:webpack serve --open}}命令行执行对代码进行编译或启动开发服务器npm run buildnpm run start二、Babel1、引入开发中经常需要结合 Babel 来对代码进行转换以使其可以兼容更多的浏览器在 webpack 的基础上需要将 Babel 结合到项目中2、使用步骤依赖配置npm i -D babel/core babel/preset-env babel-loader core-js依赖说明babel/coreBabel 的核心工具babel/preset-envBabel 的预定义环境babel-loaderBabel 在 webpack 中的加载器core-jscore-js 可以使老版本的浏览器支持新版 ES 语法配置 webpack.config.js 配置文件constpathrequire(path);constHtmlWebpackPluginrequire(html-webpack-plugin);// 引入 HTML 插件const{CleanWebpackPlugin}require(clean-webpack-plugin);// 引入 clean 插件module.exports{// webpack 中的所有的配置信息都写在 module.exports 中entry:./src/index.ts,// 定义入口文件output:{path:path.resolve(__dirname,dist),// 定义打包后文件的所在目录filename:bundle.js,// 定义打包后的文件名称environment:{arrowFunction:false,// 不使用箭头函数},},module:{// 定义 webpack 打包时要使用模块rules:[// 定义加载规则{test:/\.ts$/,// 定义规则生效的文件use:[// 定义 loader{// 配置 Babelloader:babel-loader,// 定义加载器options:{presets:[// 定义预定义环境[babel/preset-env,// 指定环境的插件{targets:{// 定义要兼容的目标浏览器chrome:58,ie:11},corejs:3,// 定义 core-js 的版本useBuiltIns:usage// 定义使用 core-js 的方式usage 表示按需加载}]]}},ts-loader],exclude:/node_modules/,// 定义排除的文件},],},plugins:[// 定义 webpack 插件newCleanWebpackPlugin(),newHtmlWebpackPlugin({// title: Hello TypeScript,template:./src/index.html}),],resolve:{// 定义引用模块extensions:[.ts,.js]},mode:development};