typescript编译方式方式学习

ts的简单编译配置方式

  1. tsconfig.json 是ts编译器的配置文件,ts编译器可以根据它的信息来对代码进行编译,文件中指定了用来编译这个项目的根文件和编译选项。
    typescript api
{
    /* 
    "include" 用来指定哪些ts文件需要被编译
    */
    "include": [
        "./src/**/*"   /* *** 路径:一个* 表示任意文件,两个*表示任意目录  */
    ],
    "exclude": [
        "./src/hello/**/*" /* *** 指定不编译 默认值 ["node_modules", "bower_components", "jspm_packages"] */
    ],
    /* "extends": "./configs/base",  */ /* 定义被继承的配置文件 */
    "files": [/* 指定被编译文件的列表,只有需要编译的文件少时才会用到  */
        /* "hello.ts", */
        "app.ts"
    ],
    "compilerOptions": {
        "target": "es2016",/* *** 默认 es3  版本有'es3', 'es5', 'es6', 'es2015', 'es2016', 'es2017', 'es2018', 'es2019', 'es2020', 'esnext'  esnext为最新版本 */
        "module": "system",/* *** 指定要使用的模块化的规范 'none', 'commonjs', 'amd', 'system', 'umd', 'es6', 'es2015', 'es2020', 'esnext' */
        /* "lib": [] *** lib 用来指定项目中要使用的库 一般不用指定,一般在非浏览器环境可以指定 Argument for '--lib' option must be: 'es5', 'es6', 'es2015', 'es7', 'es2016', 'es2017', 'es2018', 'es2019', 'es2020', 'esnext', 'dom', 'dom.iterable', 'webworker', 'webworker.importscripts', 'webworker.iterable', 'scripthost', 'es2015.core', 'es2015.collection', 'es2015.generator', 'es2015.iterable', 'es2015.promise', 'es2015.proxy', 'es2015.reflect', 'es2015.symbol', 'es2015.symbol.wellknown', 'es2016.array.include', 'es2017.object', 'es2017.sharedmemory', 'es2017.string', 'es2017.intl', 'es2017.typedarrays', 'es2018.asyncgenerator', 'es2018.asynciterable', 'es2018.intl', 'es2018.promise', 'es2018.regexp', 'es2019.array', 'es2019.object', 'es2019.string', 'es2019.symbol', 'es2020.bigint', 'es2020.promise', 'es2020.sharedmemory', 'es2020.string', 'es2020.symbol.wellknown', 'es2020.intl', 'esnext.array', 'esnext.symbol', 'esnext.asynciterable', 'esnext.intl', 'esnext.bigint', 'esnext.string', 'esnext.promise', 'esnext.weakref' */
        "outDir": "./dist",/* *** 用来指定编译后文件所在的目录 */
        "outFile": "./dist/app.js",/* 将代码合并为指定的一个文件,所有的全局作用域中的代码会合并到一个文件中,含有导入的模块化的信息,要根据模块化的配置 */
        "allowJs": true ,/* 是否对js文件进行编译,默认是false 即编译到dist目录下 */
        "checkJs": true,/* 是否对js文件代码检查语法规范,默认是false */
        "removeComments": true,/* 是否移除注释 默认false */
        "noEmit": false, /* 不生成编译后的文件 默认false */
        "noEmitOnError": true,/* 当有错误时, 不生成编译后的文件 */
        "strict": true,/* 所有严格检查的总开关,打开后下面的可以不写了 */
        "alwaysStrict": true,/* 用来设置编译后的文件是否使用严格模式,默认false,在有导入的文件中默认是使用严格模式的,即有import  。。。 */
        "noImplicitAny": true,/* 不允许隐式的any类型 */
        "noImplicitThis": true,/* 不允许不明确类型的this */
        "strictNullChecks": true,/* 严格的检查空值 示例见app.ts 检查可能代码中可能含有空值的情况,进行报错*/
    }
}

较完整的配置方式

初始化项目

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

下载构建工具

命令如下:

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中的清除插件,每次构建都会先清除目录

兼容性考虑 babel

除了webpack,开发中还经常需要结合babel来对代码进行转换;

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

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

安装依赖包:

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

根目录下创建webpack的配置文件webpack.config.js:

// 引入一个包
const path=require('path');
// 引入HTML插件
const HTMLWebpackPlugin= require('html-webpack-plugin');
// 引入clean dist文件的插件
const {CleanWebpackPlugin}=require('clean-webpack-plugin')

// webpack中的所有的配置信息都应该卸载module.export中
module.exports={
    // 指定入口文件
    entry:"./src/index.ts",
    // 指定打包文件所在目录
    output:{
        // 指定打包文件的目录
        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":"88",/* 兼容的浏览器版本 */
                                            "ie":"11"
                                        },
                                        // 指定corejs的版本
                                        "corejs":"3",
                                        // 使用corejs的方式“usage" 表示按需加载
                                        "useBuiltIns":"usage"
                                    }
                                ]
                            ]
                        }
                    },
                    'ts-loader'
                ],/* 配置文件数组中,写在后面的先执行 */
                // 要排除的文件
                exclude:/node_modules/
            }
        ]
    },
    // 配置webpack插件
    plugins:[
        new CleanWebpackPlugin(),
        new HTMLWebpackPlugin({
            // title:"这是一个自定义的title",/* 自定义网页title名 */
            template:"./src/index.html",/* 以此路径的HTML为模板 */
        })
    ],
    // 用来设置引用模块,即哪些文件可以当成模块使用
    resolve:{
        extensions:['.ts','.js']
    }
}

配置TS编译选项(简单配置)

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

{
   "compilerOptions": {
       "target": "ES2015",
       "module": "ES2015",
       "strict": true,
        "noEmitOnError": true,//当有错误不生成编译文件
   }
}

修改package.json配置

修改package.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来启动开发服务器;

如此一来,使用ts编译后的文件将会再次被babel处理;

使得代码可以在大部分浏览器中直接使用;

同时可以在配置选项的targets中指定要兼容的浏览器版本;

学习文档链接:https://github.com/JasonkayZK/typescript_learn/tree/3-webpack
学习视频链接:https://www.bilibili.com/video/BV1Xy4y1v7S2?p=6

推荐阅读更多精彩内容