likes
comments
collection
share

【TS】快速上手（五）使用webpack配置TS项目

作者站长头像
站长
· 阅读数 30

嗨！~ 大家好，我是YK菌 🐷 ，一个微系前端 ✨，爱思考，爱总结，爱记录，爱分享 🏹，欢迎关注我呀 😘 ~ [微信号: yk2012yk2012，微信公众号：ykyk2012]

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

初始化项目

通过执行命令 npm init -y 初始化一个项目并创建package.json文件

使用tsc --init 创建ts的配置文件tsconfig.json

创建src/index.ts文件，用来编写ts代码

使用构建工具webpack

安装依赖包

npm i -D webpack webpack-cli webpack-dev-server

【TS】快速上手（五）使用webpack配置TS项目

  • webpack

    • 构建工具webpack

  • webpack-cli

    • webpack的命令行工具

  • webpack-dev-server

    • webpack的开发服务器
npm i -D ts-loader typescript

【TS】快速上手（五）使用webpack配置TS项目

  • typescript

    • ts编译器

  • ts-loader

    • ts加载器，用于在webpack中编译ts文件
npm i -D html-webpack-plugin clean-webpack-plugin

【TS】快速上手（五）使用webpack配置TS项目

  • html-webpack-plugin

    • webpack中html插件，用来自动创建html文件

  • clean-webpack-plugin

    • webpack中的清除插件，每次构建都会先清除目录

配置webpack

在根目录下配置webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
  // 指定入口文件
  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"],
  },
  
  // 配置webpack的loader
  module: {
    rules: [
      {
        test: /.ts$/,
        use: {
          loader: "ts-loader",
        },
        exclude: /node_modules/,
      },
    ],
  },
  
  // 配置webpack的插件
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: "./src/index.html",
    }),
  ],
};

以上是一些基本的配置，但是在实际开发中，webpack在配置开发环境与生产环境时，配置的有些东西不太相同，所以我们应该分开写我们生产环境和开发环境的webpack配置

所以我们就在根目录下创建build文件夹存放我们的webpack配置文件

【TS】快速上手（五）使用webpack配置TS项目

npm i -D webpack-merge

【TS】快速上手（五）使用webpack配置TS项目

基本配置webpack.base.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/index.ts",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
    environment: {
      arrowFunction: false, // 关闭webpack的箭头函数，可选
    },
  },
  resolve: {
    extensions: [".js", ".ts"],
  },
  module: {
    rules: [
      {
        test: /.ts$/,
        use: [
          {
            loader: "ts-loader",
          },
        ],
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html",
    }),
  ],
};

开发环境配置webpack.dev.config.js

module.exports = {
  devtool: "inline-source-map",
};

生产环境配置webpack.pro.config.js

const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
  plugins: [new CleanWebpackPlugin()],
};

配置主文件webpack.config.js

const { merge } = require("webpack-merge");
const baseConfig = require("./webpack.base.config");
const devConfig = require("./webpack.dev.config");
const proConfig = require("./webpack.pro.config");

module.exports = (env, argv) => {
  let config = argv.mode === "development" ? devConfig : proConfig;
  return merge(baseConfig, config);
};

配置tsc

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

编写代码

index.ts

const box = document.querySelector('#app')
const hello: string = 'Hello YK菌'

if (box !== null) {
  box.innerHTML = hello
}

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>TS & webpack</title>
</head>

<body>
  <div id="app"></div>
</body>

</html>

配置命令

修改package.json添加如下配置

{
  ......
  "scripts": {
    "start": "webpack-dev-server --mode=development --config ./build/webpack.config.js",
    "build": "webpack --mode=production --config ./build/webpack.config.js"
  },
  ......
}

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

npm run build

编译

【TS】快速上手（五）使用webpack配置TS项目

【TS】快速上手（五）使用webpack配置TS项目

npm start

启动开发服务器

【TS】快速上手（五）使用webpack配置TS项目

浏览器显示内容

【TS】快速上手（五）使用webpack配置TS项目

配置babel

除了webpack，开发中还经常需要结合babel来对代码进行转换以使其可以兼容到更多的浏览器，通过以下步骤可以将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语法

修改配置文件

修改webpack.config.js配置文件

...
module: {
  rules: [
    {
      test: /.ts$/,
      use: [
        {
          loader: "babel-loader",
          // 设置babel
          options: {
            // 设置预定义的环境
            presets: [
              [
                // 指定环境的插件
                "@babel/preset-env",
                // 配置信息
                {
                  // 要兼容的目标浏览器
                  targets: {
                    chrome: "58",
                    ie: "11",
                  },
                  // 指定corejs的版本
                  corejs: "3",
                  // 使用corejs的方式 "usage" 表示按需加载
                  useBuiltIns: "usage",
                },
              ],
            ],
          },
        },
        {
          loader: "ts-loader",
        },
      ],
      exclude: /node_modules/,
    },
  ];
}
...

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

最后，欢迎关注我的专栏，和YK菌做好朋友

转载自:https://juejin.cn/post/7036300546839412750
评论
请登录