ts自动编译和手动编译

//手动编译

创建一个ts后缀的文件，在文件所在的文件夹执行命令行：tsc demo.ts[文件名]

就会编译为一个js后缀的文件，可以直接在html文件中引入名称.js文件

 

//自动编译

配置了tsconfig.json文件之后可以直接tsc进行编译

1、生成配置文件tsconfig.json

tsc -init

2、修改tsconfig.json配置

"outDir":'./js',

"strict":false,

3、启动监视任务

终端---->运行任务---->显示所有任务---->监视tsconfig.json

 

tsconfig.json是ts编译器的配置文件，ts编译器根据它的信息来对代码进行编译

“include”用来指定哪些ts文件需要被编译

路径**表示文件夹 *表示文件

“exclude”不需要被编译的文件目录，默认值：["node-modules","bower_components","json_packages"]

“include”:[

    "./src/**/*",

],

“exclude”:[

    "./src/hello/**/*",

],

compilerOptions编译器的选项

compilerOptions中包含多个子选项，用来完成对编译的配置

target:设置ts代码被编译为的ES目标版本，可选值：ES3(默认)、ES5、ES7/ES2017、ES2018、ES2019、ES2020、ESNext

module指定要使用的模块华的规范，可选“commonjs”，“none”，"amd"，"system"，"umd"，"es6"，"es2015"，"es2020"，"esnext"

lib指定项目中要使用的库，可选值：ES5、ES6/ES2016、ES2017、ES2018、ES2019、ES2020、ESNext、DOM、WebWorker、ScriptHost......

outDir用来指定编译后文件所在的目录 

"compilerOptions":{

    "target":"ES6",

    "module":"ES2015"

     "lib":["es6","dom"],

    "outDir":"./dist",

    "outFile":"./dist/app.js",//将代合并到一个文件中，设置outFile之后，所有的全局作用域中的代码会合并到同一个文件中

    "allowJs":true,//是否对js文件进行编译，默认是false

    "checkJs":true,//是否检查js代码是否符合语法规范，默认是False

    "removeComments":true,//是否移除注释

    "noEmit":false,//不生成编译后的文件,默认值false，用在不想用ts的编译功能， 只想检查一下语法，不常用 

    "noEmitOnError":false,//当有错误时不生成编译后的文件

    "alwaysStrict":false,//设置编译后的文件是否使用严格模式,默认false

    "noImplicitAny":false,//不指定类型时默认为any类型,不允许隐式的any类型

    "noImplicitThis":true,//不允许不明确类型的this,设为true会检查类型不明的this,对this指定类型可以解决警告，如this:window

    "strictNullChecks":false,//严格的检查空值

    "strict":true//所有严格模式的总开关 

}

当代码中用到了import或者export语句时，js代码会自动的进入到严格模式，，所有当用到模块代码时，已经默认在严格模式下了，不用再管它了

//引入一个包

const path = require('path');

 //webpack中所有的配置信息都应该写在

//指定webpack打包时要使用的模块

module：{

    //指定 要加载的 规则

    rules:[

          {

            //test指定的是规则生效的文件

              test:/\.ts$/,

              use:'ts-loader',

              excludes

         }

     ]

}