tsconfig.json 配置文件,通过注释简单说明配置含义

{
  // ts 编译为 js 的配置选项
  "compilerOptions": {
    // ts 编译为目标 js 的语法版本。设置为高版本或许可以提高转换速度。
    // 我们并不需要 ts 来做代码兼容。代码兼容交给 babel 来做。
    "target": "ESNext",
    // 是否启用 class fields 语法。
    // 实际上在新版 ts 里已经支持 class fields 语法。
    // 所以在新版这个配置无效,使用 class fields 语法不会报错。
    "useDefineForClassFields": false,
    // 支持环境 api。比如要运行到浏览器里,那么需要包含浏览器 document 相关的 api。
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    // 允许 js 文件被引入到 ts 文件。
    "allowJs": false,
    // 跳过对声明文件 (扩展名为 .d.ts 的文件) 的类型检查。缩短编译时间
    "skipLibCheck": true,
    // 支持合成默认导入。使 esm 里支持 cjs 模块。
    "esModuleInterop": false,
    // 允许合成默认导出。在 esm 里,支持 cjs 默认导出
    "allowSyntheticDefaultImports": true,
    // 下面七个配置的总配置。优先级低。
    "strict": true,
    // 不允许隐式 any 类型
    "noImplicitAny": true,
    // 严格检查 null 类型
    "strictNullChecks": true, 
    // 严格函数类型
    // function getCurrentYear(callback: (date: string | number) => void) {
    //   callback(Math.random() > 0.5 ? '2020' : 2020)
    // }
    // getCurrentYear((date: string) => {
    //   console.log(date.charAt(0))
    // })
    "strictFunctionTypes": true,
    // 使用 bind、call 和 apply 语法的时候,是否进行参数检查
    "strictBindCallApply": true,
    // 这个选项要和 strictNullChecks 配合使用才行。该选项用于检查类的属性是否被初始化,如果开启则必须进行初始化。
    "strictPropertyInitialization": true,
    // 不允许出现隐式any类型的this  
    "noImplicitThis": true,
    // 就是 JavaScript 中的 "use strict",肯定是要开启的
    "alwaysStrict": true,
    // 强制引入文件名的大小写一致。防止对大小写敏感的系统出错。
    "forceConsistentCasingInFileNames": true,
    // 默认值为 none。打包工具会处理成符合规范的模块化代码。
    "module": "ESNext",
    // 模块导入解析策略。node 会在 node_modules 里去找。
    "moduleResolution": "Node",
    // 是否支持引入 json 文件
    "resolveJsonModule": true,
    // 强制要求导入、导出类型都加上 type
    "isolatedModules": true,
    // 不输出转化后的 js 文件
    "noEmit": true,
    // TS具有三种JSX模式:preserve,react和react-native
    // 在preserve模式下生成代码中会保留JSX以供后续的转换操作使用
    // react模式会生成React.createElement,在使用前不需要再进行转换操作了
    // react-native相当于preserve,它也保留了所有的JSX,但是输出文件的扩展名是.js
    "jsx": "react-jsx",
    // 设置路径文件名,用于项目中路径简写
    "paths": {
      "@/*": ["./src/*"]
    },
  },
  // include 字段用于指明需要被 tsc 编译的文件或文件夹列表,例如:
  "include": ["src"],
  // “项目引用(Project References)” 功能,它允许用户为项目的不同部分使用不同的 TypeScript 配置。
  "references": [{ "path": "./tsconfig.node.json" }]
}

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Angular 使用 webpack 来构建和打包项目,webpack 配置文件默认情况下是隐藏的,使用 Angular CLI 提供的 `ng eject` 命令可以将默认的 webpack 配置文件转换为标准的 webpack 配置文件,并将所有依赖项添加到 `package.json` 文件中。下面是一个示例的 Angular webpack 配置文件注释: ```javascript const path = require('path'); const webpack = require('webpack'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = { // 入口文件 entry: { 'polyfills': './src/polyfills.ts', 'app': './src/main.ts' }, // 输出文件 output: { path: path.resolve(__dirname, 'dist'), // 输出文件的名称 filename: '[name].[hash].js', // chunk 文件的名称 chunkFilename: '[id].[hash].chunk.js', // 配置资源文件的路径 publicPath: '/' }, // 模块加载器 module: { rules: [ // 处理 TypeScript 文件 { test: /\.ts$/, loaders: [ { loader: 'awesome-typescript-loader', options: { configFileName: path.resolve(__dirname, 'tsconfig.json') } } , 'angular2-template-loader' ] }, // 处理 HTML 文件 { test: /\.html$/, loader: 'html-loader' }, // 处理样式文件 { test: /\.css$/, exclude: path.resolve(__dirname, 'src', 'app'), loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader?sourceMap' }) }, // 处理项目中的组件样式文件 { test: /\.css$/, include: path.resolve(__dirname, 'src', 'app'), loader: 'raw-loader' } ] }, // 插件 plugins: [ // 生成 HTML 文件 new HtmlWebpackPlugin({ template: 'src/index.html' }), // 配置全局变量 new webpack.DefinePlugin({ 'process.env': { 'NODE_ENV': JSON.stringify('production') } }), // 提取公共模块 new webpack.optimize.CommonsChunkPlugin({ name: ['app', 'polyfills'] }), // 提取样式文件 new ExtractTextPlugin('[name].[hash].css') ], // 解析模块请求的选项 resolve: { extensions: ['.ts', '.js'] }, // 配置 devServer devServer: { historyApiFallback: true, stats: 'minimal' }, // 配置 source map devtool: 'source-map' }; ``` 以上是一个基本的 Angular webpack 配置文件的示例,其中包括了入口文件、输出文件、模块加载器、插件、解析模块请求的选项、devServer 配置以及 source map 配置等等。注释中详细说明了每个配置项的作用和配置方式。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值