TypeScript基础入门第二弹——配置选项 and webpack打包ts代码 | 青训营笔记

爱困的猫cat
169 阅读3分钟

这是我参加「第四届青训营 」笔记创作活动的第七天。

1 监视模式

1.2 方法1

当我们每次修改ts文件时，需要重新保存编译，这样就会很麻烦，所有可以用监视模式，自动完成编译。

命令:tsc ./xx.ts -w

1.2.方法2

当我们想让所有文件修改时都自动编译，则可以使用tsc

在使用之前需要一个tsconfig.json文件，

命令：tsc -init，会创建文件并给一个默认结构

然后再使用命令：tsc -w；此时修改当前文件下的任意ts文件，相对应的js文件也会修改

2. tsconfig.json配置选项

文件名为tsconfig.json

{
    //**任意目录 *任意文件
    "include":["./src/**/*"],//指定当前可编译的文件
    "exclude":["./src/hello/**/*"],//当前不需要编译的文件
    "extends":["./configs/base"],//定义被继承的配置文件
    "files":["a.ts","b.ts"],//与include差不多，一般不会使用
    //------*****重点！！！*****------
     "compilerOptions": {
     //target 指定ts被编译为ES的版本
     "target":"ES6"
     //详细用法见下
 }
}

compilerOptions子选项

{
  "compilerOptions": {
     //target 指定ts被编译为ES的版本."ES3", "ES5", "ES6", "ES2015", "ES2016", "ES2017", "ES2018", "ES2019", "ES2020", "ES2021", "ES2022", "ESNext"
     "target":"ES6",
     
     //module 指定模块化的规范."CommonJS", "AMD", "System", "UMD", "ES6", "ES2015", "ES2020", "ESNext", "None", "ES2022", "Node16", "NodeNext"
     "module":"es2015",
     
     //lib指定项目中要使用的库
     "lib":["dom","es6"],
     
     //outDir 指定编译后文件所在目录
     "outDir":"./dist",
     
     //outFile 将代码合并为一个文件,两个ts文件合并到同一个文件中，所有全局作用域的代码合并到同一个文件中
     "outFile":"。/dist/app.js",
     
     //allowJs 是否对文件进行编译，默认是false
     "allowJs":false,
     
     //allowJs 是否对文件进行检查，默认是false
     "checkJs":false,
     
     //removeComments 是否移除注释
     "removeComments":true,
     
     //noEmit 不生成编译后的文件
     "noEmit":true,
     
     //noEmitOnError 当有错误不生成编译后的文件
      "noEmitOnError":true,
      
    //alwaysStrict 用来设置编译后的文件是否使用严格模式，默认false
    "alwaysStrict":true,
    
    //noImplicitAny 不允许隐式的any类型
    "noImplicitAny":true,
    
    //strictNullChecks 严格的检查空值
    "strictNullChecks": true, 
    
    //strict 严格检查的总开关
    "strict":true
 }
}

3. webpack打包ts代码

3.1简单配置

  1. 新建文件夹，生成packge.json。

     命令：npm init -y

  2. 安装所需要的依赖

     命令：cnpm i -D webpack webpack-cli typescript ts-loader
 
 webpack：构建工具webpack，webpack-cli：webpack的命令行工具，
 
 webpack-dev-server：webpack的开发服务器，typescript：ts编译器
 
 ts-loader是webpack加载器，可将webpack和typesc整合变为一体。

  3. 编写webpack配置文件

     webpack.config.js

//引入一个包
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/
      },
    ],
  },
};
  1. tsconfig.js文件配置
{
  "compilerOptions": {
    "module": "ES2015",
    "target": "ES2015",
    "sourceMap": true
  }
}
  1. 在package.json中添加

注意:build的mode一定要是production！！！！development会是一长串的东西！！

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode production"
  },

  1. 使用

     在index.ts文件中编写代码，然后num run build进行编译

3.2扩展

3.2.1 插件：html-webpack-plugin

  1. 安装插件

     当需要在网页中使用时需要html文件，此使我们就需要安装一个插件。
 cnpm i -D html-webpack-plugin帮助我们自动生成html文件

  2. 在webpack.config.json中添加配置

//引入
const HTMLWebpackPlugin=require('html-webpack-plugin')
module.exports = {
//添加，原来的不变
  plugins:[
    new HTMLWebpackPlugin()
  ]
};

//还可以自定义模板 
plugins: [
    new HTMLWebpackPlugin({
      //   title: "这是一个自定义的title",
      template: "./src/index.html",//index.html是什么自动生成什么
    }),
  ],
  1. 当我们再使用npm run build 则会多出html文件 image.png

3.2.2 插件：webpack-dev-server

  1. 安装插件

     安装内置服务器，安装后可以让项目在这个服务器中运行
 cnpm i -D webpack-dev-server

  2. 在package.json中添加配置

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode development",
    //新添加
    "start": "webpack serve --open --mode production"，

  },

执行命令：npm start
会自动打开页面，并且修改ts文件内容保存后会自动更新

3.2.3 插件：clean-webpack-plugin

  1. 安装插件

     先清空dist目录然后再添加
 cnpm i -D clean-webpack-plugin

  2. 在webpack.config.json中添加配置

//引入
const CleanWebpackPlugin = require("clean - webpack - plugin");

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

执行命令：npm start
会自动打开页面，并且修改ts文件内容保存后会自动更新

3.2.4 引用模块

当有多个ts文件时，将其暴露，然后在index.ts中引用，直接使用会报错，需要在webpack.config.json中添加配置

 //用来设置引用模块，与plugins同级，注意有ts前有点！！！！找了了好久的错误
  resolve: {
    extensions: [".ts", ".js"],
  },

3.3 bable

js有不同标准，会有兼容性问题，有些浏览器不支持，因此需要转换

  1. 安装

    cnpm i -D @babel/core @babel/preset-env babel-loader core-js

  2. webpack.config.js配置

 output: {
    //指定打包文件所在目录
    path: path.resolve(__dirname, "dist"),
    //打包后文件名
    filename: "bundle.js",
    clean: true,
    //不使用箭头函数
    environment: {
      arrowFunction: false,
    },
  },
  
  //指定要加载的规则
    rules: [
      {
        //test指定的是规则生效的文件
        test: /\.ts$/,
        //要使用的loader
        use: [
          {
            //指定加载器
            loader: "babel-loader",
            //设置babel
            options: {
              presets: [
                [
                  //指定环境插件
                  "@babel/preset-env",
                  //配置信息
                  {
                    //要兼容的目标浏览器
                    targets: {
                      chrome: "88",
                    },
                    //指定corejs版本
                    corejs: "3",
                    //使用corejs的方法:按需加载
                    useBuiltIns: "usage",
                  },
                ],
              ],
            },
          },

          "ts-loader",
        ], //从前往后执行，因此放前面
avatar
文章
阅读
粉丝