typescript中的打包方法以及配置方法

Posted 2021-07-20 stay_少年与梦

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了typescript中的打包方法以及配置方法相关的知识，希望对你有一定的参考价值。

文章目录

前言
webpack
- 步骤：
Babel
- - 1. 安装依赖包：
  - 2. 修改`webpack.config.js`配置文件
总结

前言

今天我们一起继续来学习TS中的打包。

webpack

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

步骤：

1. 初始化项目

 - 进入项目根目录，执行命令 ```npm init -y```
   主要作用：创建package.json文件

2. 下载构建工具

在终端中输入该命令

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

3. 根目录下创建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测试'
           }),
       ]
   
   }

简单的注释一下

// 引入一个包
const path=require("path");
// webpack中的所有的配置信息都应该写在module.exports中

module.exports={

    // 指定入口文件
    entry:"./src/index.ts",

    // 指定打包文件所在目录
    output:{
        // 指定打包文件的目录
        path:path.resolve(__dirname,"dist"),
        // 打包后文件的文件
        filename:"bundle.js"
    },

    // 指定webpack打包时要使用模板
    module:{
        // 指定要加载的规则
        rules:[
            {
                // test指定的是规则生效的文件
                test: /\\.ts$/,
                // 要使用的loader
                use:'ts-loader',
                // 要排除的文件
                exclude: /node_modules/
            }
        ]
    }


}

4. 根目录下创建tsconfig.json，配置可以根据自己的需要去修改添加

 ```json
   {
       "compilerOptions": {
           "target": "ES2015",
           "module": "ES2015",
           "strict": true
       }
   }
   ```

5. 修改package.json添加如下配置

 ```json
   {
     "scripts": {
       "test": "echo \\"Error: no test specified\\" && exit 1",
       "build": "webpack",
       "start": "webpack serve --open chrome.exe"
     },
   }
   ```

6. 在src下创建ts文件，并在并命令行执行`npm run build`对代码进行编译，或者执行`npm start`来启动开发服务器。

Babel

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

1. 安装依赖包：

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语法

2. 修改`webpack.config.js`配置文件

   module: {
       rules: [
           {
               test: /\\.ts$/,
               use: [
                   {
                       loader: "babel-loader",
                       options:{
                           presets: [
                               [
                                   "@babel/preset-env",
                                   {
                                       "targets":{
                                           "chrome": "58",
                                           "ie": "11"
                                       },
                                       "corejs":"3",
                                       "useBuiltIns": "usage"
                                   }
                               ]
                           ]
                       }
                   },
                   {
                       loader: "ts-loader",
   
                   }
               ],
               exclude: /node_modules/
           }
       ]
   }