建购物网站 教程,WordPress动态页面缓慢,网站建设 项目文档,电子商务网站建设需求说明书webpack 通常情况下#xff0c;实际开发中我们都需要使用构建工具对代码进行打包#xff0c;TS同样也可以结合构建工具一起使用#xff0c;下边以webpack为例介绍一下如何结合构建工具使用TS。 步骤#xff1a; 初始化项目 进入项目根目录#xff0c;执行命令 npm init -…webpack 通常情况下实际开发中我们都需要使用构建工具对代码进行打包TS同样也可以结合构建工具一起使用下边以webpack为例介绍一下如何结合构建工具使用TS。 步骤 初始化项目 进入项目根目录执行命令 npm init -y 主要作用创建package.json文件 下载构建工具 npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader clean-webpack-plugin 共安装了7个包 webpack 构建工具webpack webpack-cli webpack的命令行工具 webpack-dev-server webpack的开发服务器 typescript ts编译器 ts-loader ts加载器用于在webpack中编译ts文件 html-webpack-plugin webpack中html插件用来自动创建html文件 clean-webpack-plugin webpack中的清除插件每次构建都会先清除目录 根目录下创建webpack的配置文件webpack.config.js const path require(path);
const HtmlWebpackPlugin require(html-webpack-plugin);
const { CleanWebpackPlugin } require(clean-webpack-plugin);module.exports {optimization:{minimize: false // 关闭代码压缩可选},entry: ./src/index.ts,devtool: inline-source-map,devServer: {contentBase: ./dist},output: {path: path.resolve(__dirname, dist),filename: bundle.js,environment: {arrowFunction: false // 关闭webpack的箭头函数可选}},resolve: {extensions: [.ts, .js]},module: {rules: [{test: /\.ts$/,use: {loader: ts-loader },exclude: /node_modules/}]},plugins: [new CleanWebpackPlugin(),new HtmlWebpackPlugin({title:TS测试}),]}根目录下创建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 chrome.exe},...略...
}在src下创建ts文件并在并命令行执行npm run build对代码进行编译或者执行npm start来启动开发服务器
5、Babel 经过一系列的配置使得TS和webpack已经结合到了一起除了webpack开发中还经常需要结合babel来对代码进行转换以使其可以兼容到更多的浏览器在上述步骤的基础上通过以下步骤再将babel引入到项目中。 安装依赖包 npm i -D babel/core babel/preset-env babel-loader core-js共安装了4个包分别是 babel/core babel的核心工具 babel/preset-env babel的预定义环境 babel-loader babel在webpack中的加载器 core-js core-js用来使老版本的浏览器支持新版ES语法 修改webpack.config.js配置文件 ...略...
module: {rules: [{test: /\.ts$/,use: [{loader: babel-loader,options:{presets: [[babel/preset-env,{targets:{chrome: 57,ie: 11},corejs:3,useBuiltIns: usage}]]}},{loader: ts-loader,}],exclude: /node_modules/}]
}
...略...如此一来使用ts编译后的文件将会再次被babel处理使得代码可以在大部分浏览器中直接使用可以在配置选项的targets中指定要兼容的浏览器版本。
测试
webpack.config.js
// 引入一个包
const path require(path);
// 引入html插件
const HTMLWebpackPlugin require(html-webpack-plugin);
// 引入clean插件
const { CleanWebpackPlugin } require(clean-webpack-plugin);// webpack中的所有的配置信息都应该写在module.exports中
module.exports {// 指定入口文件entry: ./src/index.ts,// 指定打包文件所在目录output: {// 指定打包文件的目录path: path.resolve(__dirname, dist),// 打包后文件的文件filename: bundle.js,// 告诉webpack不使用箭头environment:{arrowFunction: false}},// 指定webpack打包时要使用模块module: {// 指定要加载的规则rules: [{// test指定的是规则生效的文件test: /\.ts$/,// 要使用的loaderuse: [// 配置babel{// 指定加载器loader:babel-loader,// 设置babeloptions: {// 设置预定义的环境presets:[[// 指定环境的插件babel/preset-env,// 配置信息{// 要兼容的目标浏览器targets:{chrome:58,ie:11},// 指定corejs的版本corejs:3,// 使用corejs的方式 usage 表示按需加载useBuiltIns:usage}]]}},ts-loader],// 要排除的文件exclude: /node-modules/}]},// 配置Webpack插件plugins: [new CleanWebpackPlugin(),new HTMLWebpackPlugin({// title: 这是一个自定义的titletemplate: ./src/index.html}),],// 用来设置引用模块resolve: {extensions: [.ts, .js]}};package.json
{name: part3,version: 1.0.0,description: ,main: index.js,scripts: {test: echo \Error: no test specified\ exit 1,build: webpack,start: webpack serve --open chrome.exe},keywords: [],author: ,license: ISC,devDependencies: {babel/core: ^7.12.9,babel/preset-env: ^7.12.7,babel-loader: ^8.2.2,clean-webpack-plugin: ^3.0.0,core-js: ^3.8.0,html-webpack-plugin: ^4.5.0,ts-loader: ^8.0.11,typescript: ^4.1.2,webpack: ^5.6.0,webpack-cli: ^4.2.0,webpack-dev-server: ^3.11.0}
}
tsconfig.json
{compilerOptions: {module: ES2015,target: ES2015,strict: true}
}
