Merge pull request #46 from nighca/master

add config `transpileOnlyWhenDev` for tsx? transform

Author: nighca

README.md

@@ -19,6 +19,8 @@
 npm 包（适合本地开发用）
 
 ```shell
+# fec-builder 使用 npm-shrinkwrap.json 锁定依赖版本，yarn 不会识别 npm-shrinkwrap.json
+# 这里请使用 npm 安装全局包
 npm i fec-builder -g
 # 项目目录下执行
 fec-builder -p 8080
@@ -85,7 +87,7 @@ npm 包与 docker 镜像的对比，优点：
 
 	1. 直接使用 transformer 名，如 `"css"`、`"less"`
 
-	2. 一个 object，包含两个字段：`transformer` 与 `config`
+	2. 一个 object，包含两个字段：`transformer` 与 `config`，具体各 transformer 对应的可配置项见下方 transformer 的配置
 
 		- `transformer`: 即 transformer 名，如 `babel`
 		- `config`: 即 transformer 的配置，如
@@ -148,6 +150,23 @@ npm 包与 docker 镜像的对比，优点：
 
 		表示使用 `xxx`、`yyy` 分别作为 AccessKey 与 SecretKey，上传到名为 `zzz` 的 bucket。
 
+### transformer 的配置
+
+对于不同的 transformer，我们可以通过与 `transformer` 平级的 `config` 字段对 transformer 的行为进行配置，这里是不同 transformer 支持的配置项：
+
+##### `ts`
+
+* `transpileOnlyWhenDev: boolean = true`
+
+	对于 ts 的转换，builder 会默认在开发模式跳过类型检查，提高构建效率，避免过严的限制；这个行为可以通过配置 `transpileOnlyWhenDev` 为 `false` 禁用，即，在开发时也进行类型检查
+
+##### `tsx`
+
+* `transpileOnlyWhenDev: boolean = true`
+
+	同 `ts` 的 `transpileOnlyWhenDev` 配置
+
+
 ### CHANGELOG
 
 v1.4.0 及以后后的 Changelog 见 [Releases 页面](https://github.com/Front-End-Engineering-Cloud/builder/releases)

bin/fec-builder

@@ -121,6 +121,11 @@ function applyArgv(argv) {
 }
 
 function handleError(e) {
-  logger.fatal(e)
+  if (Array.isArray(e)) {
+    e.forEach(item => logger.error(item))
+  } else {
+    logger.error(e)
+  }
+  logger.fatal('encountered error, exit 1')
   process.exit(1)
 }

lib/serve.js

@@ -23,16 +23,16 @@ const serve = port => getWebpackConfig().then(
 
     WebpackDevServer.addDevServerEntrypoints(webpackConfig, webpackDevServerConfig)
 
-    const compiler = webpack(webpackConfig)
-    const server = new WebpackDevServer(compiler, webpackDevServerConfig)
-
     logger.debug(`host: ${host}`)
     logger.debug(`port: ${port}`)
     logger.debug('dev server config:')
     logger.debug(webpackDevServerConfig)
     logger.debug('webpack config:')
     logger.debug(webpackConfig)
 
+    const compiler = webpack(webpackConfig)
+    const server = new WebpackDevServer(compiler, webpackDevServerConfig)
+
     server.listen(port, host, () => {
       logger.info(`Starting server on ${host}:${port}`)
     })

lib/webpack-config/addons/add-transform.js

@@ -131,8 +131,8 @@ const addDefaultExtension = (config, extension) => {
   })
 }
 
-const makeReactBabelOptions = config => {
-  const options = config && config.babelOptions || {}
+const makeReactBabelOptions = babelOptions => {
+  const options = babelOptions || {}
   const presets = options.presets || []
   const plugins = options.plugins || []
   return utils.extend(options, {
@@ -176,7 +176,11 @@ module.exports = (config, key, transform, post) => {
     case transforms.less:
     case transforms.sass:
     case transforms.stylus: {
-      const { autoprefixOptions, modules, raw } = transform.config || {}
+      const { autoprefixOptions, modules, raw } = utils.extend({
+        autoprefixOptions: null,
+        modules: false,
+        raw: false
+      }, transform.config)
 
       const postcssOptions = makePostcssOptions({
         autoprefixOptions
@@ -225,12 +229,16 @@ module.exports = (config, key, transform, post) => {
     }
 
     case transforms.jsx: {
+      const transformConfig = utils.extend({
+        babelOptions: undefined
+      }, transform.config)
+
       config = addDefaultExtension(config, extension)
       config = update(config, {
         module: { rules: {
           $push: [makeRule(extension, context, {
             loader: 'babel',
-            options: makeReactBabelOptions(transform.config)
+            options: makeReactBabelOptions(transformConfig.babelOptions)
           })]
         } }
       })
@@ -239,15 +247,23 @@ module.exports = (config, key, transform, post) => {
 
     case transforms.ts:
     case transforms.tsx: {
+      const transformConfig = utils.extend({
+        // 默认开发模式跳过类型检查，提高构建效率，另，避免过严的限制
+        transpileOnlyWhenDev: true,
+        babelOptions: undefined
+      }, transform.config)
+
       const babelOptions = (
         transform.transformer === transforms.tsx
-        ? makeReactBabelOptions(transform.config)
-        : transform.config
+        ? makeReactBabelOptions(transformConfig.babelOptions)
+        : transformConfig.babelOptions
       )
 
       const tsLoaderOptions = {
-        // 开发模式跳过类型检查，提高构建效率，另，避免过严的限制
-        transpileOnly: buildEnv.get() === 'development'
+        transpileOnly: (
+          transformConfig.transpileOnlyWhenDev
+          && buildEnv.get() === 'development'
+        )
       }
 
       config = addDefaultExtension(config, extension)

npm-shrinkwrap.json

@@ -37,7 +37,7 @@
     "stylus": "^0.54.5",
     "stylus-loader": "^3.0.1",
     "svg-sprite-loader": "^0.2.1",
-    "ts-loader": "^2.0.0",
+    "ts-loader": "^2.2.2",
     "typescript": "^2.4.2",
     "vue-loader": "^13.0.4",
     "vue-template-compiler": "^2.4.2",