博客

• 通常情况下，实际开发中我们都需要使用构建工具对代码进行打包，TS同样也可以结合构建工具一起使用，下边一webpack为例介绍一下如何构建工具使用TS。
• 初始化项目
  • 进入项目根目录，执行命令 npm init -y
  • 主要作用创建package.json文件
• 下载构建工具
• npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader html-webpack-plugin clean-webpack-plugin
• 共安装7个包
  • webpack
    • 构建工具webpack
  • webpage-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.config.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:{
      // 指定打包文件的目录(__dirname:获取当前执行文件所在目录的完整目录名)
      path:path.resolve(__dirname,'dist')
      // 打包后的文件
      filename:"bundle.js"
      // 告诉webpack不适用箭头函数（立即调用函数）
      environment:{
         arrowFunction:false
      }
   },
   // 指定webpack打包时要使用模块
    module: {
        // 指定要加载的规则
        rules: [
            {
                // test指定的是规则生效的文件
                test: /\.ts$/,
                // 要使用的loader
                use: [
                    // 配置babel
                    {
                        // 指定加载器
                        loader: "babel-loader",
                        // 设置babel
                        options: {
                            // 设置预定义的环境
                            presets: [
                                [
                                    // 指定环境的插件
                                    "@babel/preset-env",
                                    // 配置信息
                                    {
                                        // 要兼容的目标浏览器
                                        targets: {
                                            chrome: "58",
                                            ie: "11",
                                        },
                                        // 指定corejs的版本
                                        corejs: "3",
                                        // 使用corejs的方式 "usage" 表示按需加载
                                        useBuiltIns: "usage",
                                    },
                                ],
                            ],
                        },
                    },
                    "ts-loader",
                ],
                // 要排除的文件
                exclude: /node-modules/,
            },
        ],
    },
    // 配置Webpack插件
    plugins: [
        new CleanWebpackPlugin(),
        new HTMLWebpackPlugin({
            // title: "这是一个自定义的title"
            template: "./src/index.html",
        }),
    ],

    // 用来设置引用模块
    resolve: {
        extensions: [".ts", ".js"],
    },
}