diff --git a/README.md b/README.md index 9784453..a542a95 100644 --- a/README.md +++ b/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) diff --git a/bin/fec-builder b/bin/fec-builder index f35f9cd..42a4edf 100755 --- a/bin/fec-builder +++ b/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) } diff --git a/lib/serve.js b/lib/serve.js index 16b70b8..93b180c 100644 --- a/lib/serve.js +++ b/lib/serve.js @@ -23,9 +23,6 @@ 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:') @@ -33,6 +30,9 @@ const serve = port => getWebpackConfig().then( 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}`) }) diff --git a/lib/webpack-config/addons/add-transform.js b/lib/webpack-config/addons/add-transform.js index c81f94d..d6dc565 100644 --- a/lib/webpack-config/addons/add-transform.js +++ b/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) diff --git a/npm-shrinkwrap.json b/npm-shrinkwrap.json index ed3a511..8e9bd40 100644 --- a/npm-shrinkwrap.json +++ b/npm-shrinkwrap.json @@ -9530,14 +9530,26 @@ } }, "ts-loader": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/ts-loader/-/ts-loader-2.0.0.tgz", - "integrity": "sha1-JvOCtRlRv120yI6l87FWwc/dgT8=", + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/ts-loader/-/ts-loader-2.2.2.tgz", + "integrity": "sha512-HiusedxruMeHN1/BzpijS/rXSdup2P/IopamX235tLS3OuPU+eSXNyN3YgbHKzYEe71YkUhnm7X+VY4oOAGLtg==", "requires": { "colors": "1.1.2", "enhanced-resolve": "3.1.0", - "loader-utils": "0.2.16", + "loader-utils": "1.1.0", "semver": "5.3.0" + }, + "dependencies": { + "loader-utils": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.1.0.tgz", + "integrity": "sha1-yYrvSIvM7aL/teLeZG1qdUQp9c0=", + "requires": { + "big.js": "3.1.3", + "emojis-list": "2.1.0", + "json5": "0.5.1" + } + } } }, "tsscmp": { diff --git a/package.json b/package.json index 971bd96..cc5a7d8 100644 --- a/package.json +++ b/package.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",