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

Posted 2023-02-22 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/
           
       ]