TS开发 环境搭建 编译选和webpack打包

环境搭建

1、下载并安装Node.js

2、使用npm全局安装typescript

      进入命令行

      输入：npm i -g typescript

3、创建ts文件

4、使用tsc对ts文件进行编译

      进入命令行

      进入ts文件所在目录

      执行命令：tsc xxx.xx.ts

编译选项（编译ts变得更加简单）

1、自动监视文件变化

     方法一：在命令行中输入： tsc xxx.xx.ts -w

     局限：只能监视当前文件，其他文件想被监视需要再一次输入

     方法二：项目目录下配置ts的配置文件tsconfig.json，配置ts的编译信息

     tsc --init 初始化tsconfig.json

     tsc -w 监视所有ts文件

2、include配置项（用来指定那些ts文件文件需要被编译）

     “include”:{"./src/xx/x.ts"} 表示编译src文件夹下面的任意目录里的任意文件

3、exclude与include相反

     默认值：["node_modules","bower_components","jspm_packages"]

4、extends被继承的配置文件

      “extends”:"./configs/base"  表示当前配置文件中会自动包含config目录下base.json中的所有配        置信息，相当于引入

*5、"compilerOptions" 编译器的选项，决定了编译器如何对ts文件进行编译，包含了很多子选项

• “target” 用来指定ts被编译为的js的版本（指定ECMAScript目标版本 "ES3"（默认）， "ES5"， "ES6"， "ES2015"， "ES2016"， "ES2017"，"ES2018"，"ES2019"，"ES2020"或 "ESNext"。）
• "module" 指定要使用的模块化的解决方案 （值为："None"， "CommonJS"， "AMD"， "System"， "UMD"， "ES6"或 "ES2015"。）
• "lib" 用来指定项目中要使用的库（指定后编写会有提示）
• "outDir":用来指定编译后文件所在的目录  
• "outFile" ：将代码合并为一个文件

    "outFile"："./dist/app.js"  将代码合并到app.js中

• "allowJs" 是否对js文件进行编译，默认是false
• "checkJs" 是否检查js代码是否符合语法规范，默认是false
• "removeComments" 是否移除注释
• "noEmit" 不生成编译后的文件
• "noEmitOnError" 当有错误的时候不生成编译文件
• "alwaysStrict" 用来设置编译后的文件是否使用严格模式，默认false
• "noImplicitAny" 不允许隐式的any类型
• "noImplicitThis" 不允许不明确类型的this
• "strictNullChecks" 严格的检查空值
• "strict" 严格检查的总开关

webpack打包

1、对项目进行初始化   npm init -y 

会在项目下生成package.json文件，用来管理项目中的依赖、命令等

2、安装使用webpack需要的依赖

npm i -D webpack webpack-cli typescript ts-loader

3、编写webpack的配置文件webpack.config.js

• 在module.exports中进行配置
• entry指定入口文件
• output指定出口文件  包括path、filename(文件名)
• module 将ts编译为js 指定webpack打包时要使用的模块