Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add config transpileOnlyWhenDev for tsx? transform #46

Merged
merged 4 commits into from
Dec 26, 2017
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 20 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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 的配置,如
Expand Down Expand Up @@ -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)
Expand Down
7 changes: 6 additions & 1 deletion bin/fec-builder
Original file line number Diff line number Diff line change
Expand Up @@ -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)
}
6 changes: 3 additions & 3 deletions lib/serve.js
Original file line number Diff line number Diff line change
Expand Up @@ -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}`)
})
Expand Down
32 changes: 24 additions & 8 deletions lib/webpack-config/addons/add-transform.js
Original file line number Diff line number Diff line change
Expand Up @@ -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, {
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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)
})]
} }
})
Expand All @@ -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)
Expand Down
20 changes: 16 additions & 4 deletions npm-shrinkwrap.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down