构建工具

工程化

既将SSR（服务器端渲染）打包为前后端分离的代码

答案

A B C

解析

前端工程化在前端开发中扮演着重要的角色，是团队开发中必不可少的东西。

• 通过流程规范化、标准化等提升团队协作效率。
• 通过组件化、模块化开发等提升代码质量。
• 使用构建工具、自动化工具等提升开发效率。

所以正确答案为 A B C。

tsc 编译

ts 编译选项 https://www.tslang.cn/docs/handbook/compiler-options.html
常见的选项

注意：如果—lib没有指定默认注入的库的列表。默认注入的库为：
► 针对于—target ES5：DOM，ES5，ScriptHost
► 针对于—target ES6：DOM，ES6，DOM.Iterable，ScriptHost | | —module
-m | string | target === “ES6” ? “ES6” : “commonjs” | 指定生成哪个模块系统代码： “None”， “CommonJS（通常使用这个）”， “AMD”， “System”， “UMD”， “ES6”或 “ES2015”。
► 只有 “AMD”和 “System”能和 —outFile一起使用。
► “ES6”和 “ES2015”可使用在目标输出为 “ES5”或更低的情况下。 | | —outDir | string |
| 重定向输出目录。 | | —strict | boolean | false | （建议开启）
启用所有严格类型检查选项。
启用 —strict相当于启用 —noImplicitAny, —noImplicitThis, —alwaysStrict， —strictNullChecks和 —strictFunctionTypes和—strictPropertyInitialization。 | | —target
-t | string | “ES3” | 指定ECMAScript目标版本 “ES3”（默认）， “ES5”， “ES6”/ “ES2015”， “ES2016”， “ES2017”或 “ESNext”。

注意： “ESNext”最新的生成目标列表为 ES proposed features | | —watch
-w |
|
| 在监视模式下运行编译器。会监视输出文件，在它们改变时重新编译。监视文件和目录的具体实现可以通过环境变量进行配置。详情请看配置 Watch。 |

答案

正确

解析

tsc是 TS编译器 提供的编译命令。使用 tsc 命令可以将 ts 文件编译为 js 文件。
tsc 命令可以接收一个编译选项文件 tsconfig.json。该文件可以设置一系列编译规则，TS编译器 会根据这些编译规则生成相应的 js 文件。

tsconfig.json 常用配置

输出路径在 compilerOptions 的 outDir 指定
sourceMap 代表生成文件的 sourceMap (.map)， 既生成一个 *.js.map文件

答案

C

解析

在 tsconfig.json 中：

• compilerOptions 用于指定编译选项。其中 experimentalDecorators 的含义是启用实验性的ES装饰器。
• include 指定编译包含的文件。
• exclude 编译时需要排除的文件。

更多明细请查阅 files、include、exclude 的区别。
所以正确答案为 C。

npm scripts

package.json 中的 scripts 字段添加命令
通过 —watch 监控文件更改

答案

A B C D

解析

npm 可以在 package.json 文件里面定义脚本文件，如下：

{
    "scripts": {
        "build": "node build.js"
    },
    ...
}

• 脚本不一定是 node.js 脚本，符合 shell 脚本规范即可。
• 使用 npm run <command> 执行脚本命令。
• npm run start 可以简写为 npm start。

所以 A B C D 都是正确的。

webpack

entry/output定义输入输出
其他的定义需要打包的后缀文件和一些打包配置
module的rules 则匹配如果有正则内的.ts / .tsx 文件则使用awesome进行加载并变为JS
编译完ts后，webpack再打包

const path = require('path')
const { CheckerPlugin } = require('awesome-typescript-loader')

module.exports = {
  entry: './src/index.ts',
  output: {
    path: path.resolve(__dirname, 'public'),
    filename: 'bundle.js',
  },
  mode: 'development',
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx'],
  },
  devtool: 'source-map',
  watch: true,
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: 'awesome-typescript-loader',
      }
    ]
  },
  plugins: [
    new CheckerPlugin()
  ]
}

// 注意： 需要安装awesome-typescript-loader, typescript, webpack, webpack-cli

答案

A B

解析

webpack 本身只能处理 JavaScript 模块，如果要处理其它模块的文件需要借助 loader。
目前处理 TypeScript 的 loader 共有两个

• ts-loader
• awesome-typescript-loader

更多区别详见这里。