Teeker Blog

主题

Teeker2022-09-08
1490
6.2m
0

TypeScript - 文件打包 ​

Webpack 整合 ​

通常情况下，实际开发中我们都需要使用构建工具对代码进行打包。

TS 同样也可以结合构建工具一起使用，下边以 Webpack 为例介绍一下如何结合构建工具使用 TS。

步骤如下：

初始化项目 ​

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

下载构建工具 ​

命令如下：

sh
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 的配置文件 webpack.config.js：

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测试",
    }),
  ],
};

配置 TS 编译选项 ​

根目录下创建 tsconfig.json，配置可以根据自己需要

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

修改 package.json 配置 ​

修改 package.json 添加如下配置

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 来启动开发服务器。

Webpack 常用插件 ​

html-webpack-plugin ​

html 插件能帮助我们在打包时自动地生成 html 文件，在上面的基础上进行配置该插件：

js
// 引入一个包
const path = require("path");
// 引入 html 插件
const HTMLWebpackPlugin = require("html-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: {
    // 指定要 loader 加载的规则
    rules: [
      {
        // test 指定的是规则生效的文件
        test: /\.ts$/, //以 ts 结尾的文件
        // 要使用的 loader
        use: "ts-loader",
        // 要排除的文件
        exclude: /node-modules/,
      },
    ],
  },

  //配置 Webpack 插件
  plugins: [
    new HTMLWebpackPlugin({
      // title: "这是一个自定义的title"、
      template: "./src/index.html",
    }),
  ],

  // 用来设置引用模块，可以将这些文件识别为模块
  resolve: {
    extensions: [".ts", ".js"],
  },
};

webpack-dev-server ​

该插件能自动响应浏览器更新。

安装：

sh
npm i -D webpack-dev-server

在 package.json 中加上 start 命令：

json
"start": "webpack serve --open chrome.exe"

这样，就能在开发时实现热部署了。

clean-webpack-plugin ​

clean 插件能在 build 前清空 dist 目录所有文件，避免旧文件的遗留。

安装：

sh
npm i -D clean-webpack-plugin

使用

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: {
    // 指定要 loader 加载的规则
    rules: [
      {
        // test 指定的是规则生效的文件
        test: /\.ts$/, // 以 ts 结尾的文件
        // 要使用的 loader
        use: "ts-loader",
        // 要排除的文件
        exclude: /node-modules/,
      },
    ],
  },

  // 配置 Webpack 插件
  plugins: [
    new CleanWebpackPlugin(),
    new HTMLWebpackPlugin({
      // title: "这是一个自定义的title"、
      template: "./src/index.html",
    }),
  ],

  // 用来设置引用模块，可以将这些文件识别为模块
  resolve: {
    extensions: [".ts", ".js"],
  },
};

Babel ​

除了 Webpack，开发中还经常需要结合 babel 来对代码进行转换；

以使其可以兼容到更多的浏览器，在上述步骤的基础上，通过以下步骤再将 babel 引入到项目中。

虽然 TS 在编译时也支持代码转换，但是只支持简单的代码转换；

对于例如：Promise 等 ES6 特性，TS 无法直接转换，这时还要用到 babel 来做转换。

安装依赖包：

sh
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 配置文件

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/
    }
  ]
}
// ...

如此一来，使用 ts 编译后的文件将会再次被 babel 处理。使得代码可以在大部分浏览器中直接使用。同时可以在配置选项的 targets 中指定要兼容的浏览器版本。

这样，Webpack 的基本配置就完成了，也是项目开发中常用的配置。下面是整合后的 最终配置文件，开发时可以根据这个来做修改。

json
// 指定 Webpack 打包时要使用的模块
module: {
  // 指定要 loader 加载的规则
  rules: [
    {
      // test 指定的是规则生效的文件
      test: /\.ts$/, // 以 ts 结尾的文件
      // 要使用的 loader
      use: [
        // 配置 babel
        {
          // 指定加载器
          loader: "babel-loader",
          // 设置 babel
          options: {
            // 设置预定义的环境
            presets: [
              [
                // 指定环境的插件
                "@babel/preset-env",
                // 配置信息
                {
                  // 要兼容的目标浏览器及版本
                  targets: {
                    "chrome": "58",
                    "ie": "11"
                  },
                  // 指定 corejs 的版本（根据 package.json 中的版本，只写整数）
                  "corejs": "3",
                  // 使用 corejs 的方式 "usage" 表示按需加载
                  "useBuiltIns": "usage"
                }

              ]
            ]
          }
        },
        // 'babel-loader', // 简化版的配置
        'ts-loader'
      ],
      // 要排除的文件
      exclude: /node-modules/
    }
  ]
},
最近更新