使用webpack打包typescript

浏览器运行我们的代码时，只能识别js，如果用ts开发，我们必须要先将ts转为js

这时候就用到webpack、babel、core.js

加载顺序：

先通过webpack将ts转为js→babel将生成的js新语法转为旧语法→core添加新的api以适应更就旧版本

配置步骤如下： 

进入项目根目录，执行命令 npm init -y，创建package.json文件

下载构建工具

配置webpack 

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中的清除插件，每次构建都会先清除目录

配置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语法（如新的api在就浏览器中不存在的问题）

 详细文件配置如下：

根目录下创建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/test.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: [
                  {//配置babel，使得转化后的js代码适应更多的浏览器
                      loader: "babel-loader",
                      options:{
                          presets: [
                              [
                                  "@babel/preset-env",
                                  {
                                      "targets":{ //设置兼容的浏览器最低版本
                                          "chrome": "58",
                                          "ie": "11"
                                      },
                                      "corejs":"3", //使低版本浏览器读取高版本的js的api
                                      "useBuiltIns": "usage" //按需加载core.js
                                  }
                              ]
                          ]
                      }
                  },
                  {
                      loader: "ts-loader",

                  }
              ],
              exclude: /node_modules/
          }
      ]
  },

   plugins: [
       new CleanWebpackPlugin(),//每次打包都清除上一次打包的文件
       new HtmlWebpackPlugin({ //自定义生成的html文件
           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" 
        //运行npm run start时，就是运行webpack serve
        //--open chrome.exe运行成功后自动打开谷歌浏览器
   },
   ...
}

项目使用

在src下创建ts文件，并在并命令行执行npm run build对代码进行编译；

或者执行npm start来启动开发服务器；