对
ts.config
进行详细介绍 要使用tsconfig.json
文件npm
运行直接tsc
就好 不然会忽视这个文件
outDir
输出到指定目录 文件夹📂不存在 -> 会创建
target
options:[ ES3|"ES5"|"ES6"|"ES2015"|ES2016"|"ES2017"|"ESNext"]
默认值:ES3
指定编译的ECMAScript目标版本
*这个需要与lib选项配合*
lib
编译过程中需要引入的库文件的列表 不然编译通不过
*代码中使用ES新特性 编译的代码宿主环境的polyfill 需要自己引入 babel-core*
module
options:["None"|"CommonJS"|"AMD"|"System"|"UMD"|"ES6"|"ES2015"]
None: 没有模块 代码不能出现import modele.exports等等
其余生成对应的模块代码
默认值:target === "ES6" ? "ES6" : "commonjs"
*注意:这个决定模块怎么解析*
baseUrl
module:commonjs -> baseUrl 模块解析 nodejs相似
step1: baseUrl的路径去搜索 -> 运用 baseUrl/[*.js|*.jsx|*(目录)]
step2: tsconfig.json文件路径下 -> 运用 nodejs require
module:非commonjs -> baseUrl 模块解析 Classic
step1: 文件搜索 tsconfig所在目录一层层向上搜索
step1: 目录搜索 逐级 -> node_modules -> (找到)node_modules/@types
traceResolution
生成模块解析日志信息,帮助理解baseUrl等相关配置 非常有用
sourceMap
生成sourceMap
allowJs
是否编译js
jsx
.tsx文件里支持JSX
jsxFactory
render () { <div /> } => ${jsxFactory}(div, null, [])
这个可以写自己的编译函数 omi taro里面全是这个原理
esModuleInterop
用来兼容模块commonjs
和ES module
混用导入导出问题,比如你的module: commonjs
:
// a.ts es module
export default (log) => console.log(log)
// b.ts commonjs
const consoleLog = require('./a.js')
consoleLog(10) // 报错 不存在这个函数
// ****** -----> 修正 <----- ********
consoleLog.default(10)
那为了解决上面的问题, ts提供了新的方法解决commonjs
和es module
混用的情况
// a.ts
export = (log) => console.log(log)
// b.ts commonjs
improt consoleLog = require('./a.js')
consoleLog(10) // 这样就不会报错了
当你esModuleInterop: true
的时候,完全可以写成:
// b.ts
import consoleLog from './a.js'
consoleLog(10)
allowUmdGlobalAccess
用于.ts
文件中全局使用UMD库的全局变量
TODO 后续更新。。。