【TypeScript】第三部分 webpack打包TS

【TypeScript】第三部分 webpack打包TS

---

---

3. webpack打包TS

3.1 打包步骤

通常情况下，实际开发中我们都需要使用构建工具对代码进行打包，TS同样也可以结合构建工具一起使用，下边以webpack为例介绍一下如何结合构建工具使用TS。

步骤:

1. 初始化项目: npm init -y ,主要作用就是为了生成package.json文件

2. 下载构建工具:

   npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader html-webpack-plugin clean-webpack-plugin

   共安装了7个包

   构建工具	作用
   webpack	构建工具 webpack
   webpack-cli	webpack的命令行工具
   webpack-dev-server	webpack的开发服务器
   typescript	构建工具 typescript
   ts-loader	ts加载器，用于在webpack中编译ts文件
   html-webpack-plugin	webpack中html插件，用来自动创建html文件
   clean-webpack-plugin	webpack中的清除插件，每次构建都会先清除目录

3. 创建tsconfig.json文件

   {
       "compilerOptions": {
           "module": "es2015",
           "target": "es2015",
           "strict": true
       }
   }
   

4. 创建webpackconfig.js文件

   const {resolve}  = require('path')
   
   // 引如html插件
   const HtmlWebpackPlugin = require('html-webpack-plugin')
   
   // 引入clear插件
   const {CleanWebpackPlugin} = require('clean-webpack-plugin')
   
   module.exports = {
       entry:'./src/index.ts',
       output:{
           filename:'js/index.js',
           path:resolve(__dirname,'build')
       },
       module:{
           rules:[
               {
                   test:/\.ts$/,
                   use:['ts-loader'],
                   exclude:/node_modules/
               }
           ]
       },
       plugins:[
           new HtmlWebpackPlugin({
               template:'./src/index.html'
           }),
           new CleanWebpackPlugin()
       ],
       // 用来设置引入模块规则
       resolve:{
           //告诉webpack哪些文件可以导入
           extensions:['.js','.css','.ts']
       },
       mode:'development'
   
   }
   

3.2 配置babel

​ 经过上述的配置，使得TS和webpack已经结合到了一起，除了webpack，开发中还经常需要结合babel来对代码进行转换以使其可以兼容到更多的浏览器，在上述步骤的基础上，通过以下步骤再将babel引入到项目中。

下载: npm i -D @babel/core @babel/preset-env babel-loader core-js

构建工具	作用
@babel/core	babel核心工具
@babel/preset-env	babel预设环境
babel-loader	babel在webpack中的加载器
core-js	core-js用来使得老版本的能够兼容ES新版本

const {resolve}  = require('path')

// 引如html插件
const HtmlWebpackPlugin = require('html-webpack-plugin')

// 引入clear插件
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
module.exports = {
 entry:'./src/index.ts',
 output:{
     filename:'js/index.js',
     path:resolve(__dirname,'build'),
   	environment:{
         //告诉webpack不使用箭头函数
         arrowFunction:false
     }
 },
 module:{
     rules:[
         {
             test:/\.ts$/,
             use:[
                 //配置babel
                 {
                     //指定加载器
                     loader:'babel-loader',
                     //设置babel
                     options:{
                           //配置预设环境
                           presets:[
                             [
                                 //指定预设环境的插件
                                " @babel/preset-env",
                                 {
                                     //需要兼容目标浏览器的版本
                                     targets:{
                                         "chrome":58,
                                         "ie":11
                                     },
                                     //指定corejs的版本
                                     "corejs":"3",
                                     //指定corejs的方式,usage:按需加载
                                     useBuiltIns:'usage'
                                 }
                             ]
                         ]
                     }
                 },
                 {
                   loader:"ts-loader"
                 }
             ],
             exclude:/node_modules/
         }
     ]
 },
 plugins:[
     new HtmlWebpackPlugin({
         template:'./src/index.html'
     }),
     new CleanWebpackPlugin()
 ],
 // 用来设置引入模块规则
 resolve:{
     //告诉webpack哪些文件可以导入
     extensions:['.js','.css','.ts']
 },
 mode:'development'

}

---

总结

以上就是今天要讲的内容，希望对大家有所帮助！！！