# 编译配置

项目根目录下的 `nbjump.config.js` 为编译配置文件。

框架预置的默认配置如下，在 `nbjump.config.js` 中的配置会与默认配置进行深度 merge (默认配置中同名的配置项会被自定义配置覆盖，包括数组，数组不会进行 concat，如需要请自行处理)。

自定义配置导出类型如下：

Type：`(target: string) => Object`

## 配置项

### `projectFiles`
小程序配置文件列表，每次编译时时不会从 `dest` 删除。

### `appConfig`
Since：`@nbjump/build@0.3.8`

Type: `{config: Object appJsonConfig}`

配置 app 入口配置项，支持根据 target 动态配置能力。

### `source`
需要编译的单文件组件(SFC)源代码文件 glob。

### `dest`  
编译产出目录

### `assets`
需要复制到 `dest` 的文件 glob。

### `watch`
需要监听的文件 glob

### `designWidth`
设计稿尺寸换算单位(px)。

框架默认开启 px 单位转换功能（通过 `postcss-px2units` 插件），在小程序中会转换为 `rpx`，在 H5 中会转换为 `rem`。

将 `designWidth` 设置为实际设计稿的宽度值，在开发汇总书写尺寸即可按照 1:1 的关系来进行书写，即从设计稿上量的长度 100px，那么尺寸书写就是 100px。


### `module`
各个编译模块的配置。

#### `module.postcss.px2units`
Type: `options: Object | false`

`postcss-px2units` 插件配置，如果需要关闭 px 单位转换，将 `module.postcss.px2units` 设置为 `false` 即可。
options 配置请参考 [postcss-px2units](https://www.npmjs.com/package/postcss-px2units)。

### `preprocessors`
Type: `{[name: string]: processor}`

Type of `processor`: `{ extnames: Array<string lang> [, options: Object, process: process]}`

Type of `process`: `(source: string, options: Object, file: Object) => string`

Type of `file`: `{path: string fileDestPath}`

预处理器，可以为各种语言类型的 SFC block 以及 assets 文件设置预处理器（其语言类型由 `lang` 属性指定，对于 App、Page、Component 的相关配置，也可以设置处理器，其语言类型为  `json`），预处理器将在 SFC 每一个 `block` 编译之前调用。

调用内置处理器可以通过 `name` 来指定要调用的处理器名称，通过 `extnames` 来设置处理器生效的语言类型，通过 `processor.options` 来设置传给处理器的选项。

目前提供的内置处理器有

- `babel` 即 `@babel/core`
- `less`
- `stylus`
- `scss`
- `postcss`
- `typescript`

如果内置处理器不能满足需求，也可以通过 `processor.process` 函数来设置自定义处理器。

### `postprocessors`
后处理器，配置同 `preprocessors`。后处理器将在 SFC 每一个 `block` 编译之后调用。

### `h5`

H5 特有编译配置，只影响 H5 的功能。

#### `h5.navigationBarHomeColor`
Type: enum('dark', 'light')

Home icon 颜色配置，默认 `dark`。

#### `h5.showNavigationBorder`
Type: boolean

是否显示 navigationBar 下划线，默认true。

#### `h5.mode`
Type: enum('history', 'hash')

设置 vue-router 的 mode，默认 `history`。

## 默认配置示例
```js

module.exports = function (target) {
    const config = {
        projectFiles: ['project.swan.json', 'project.config.json'],
        source: ['src/**/*.vue'],
        dest: `./dist-${target}`,
        assets: [
            'src/**/*.!(vue)'
        ],
        designWidth: 750,
        watch: ['src/**/*'],
        modules: {
            postcss: {
                px2units: {}
            }
        },
        preprocessors: {
            less: {
                extnames: ['less']
            },
            sass: {
                extnames: ['sass', 'scss']
            },
            stylus: {
                extnames: ['stylus', 'styl']
            },
            typescript: {
                extnames: ['ts']
            }
        },
        postprocessors: {
            postcss: {
                extnames: ['css', 'less', 'sass', 'scss', 'stylus', 'styl'],
                options: {
                    plugins: [require('autoprefixer')]
                }
            }
        }
    };

    return config;
};

```

## 自定义配置示例

```js

module.exports = function (target) {
    const overrideBrowserslist = target === 'h5'
        ? ['iOS >= 7', 'android >= 2.3']
        : ['last 2 versions'];

    const config = {
        designWidth: 640,
        modules: {
            postcss: {
                px2units: {
                    // px2units options
                }
            }
        },
        postprocessors: {
            postcss: {
                options: {
                    plugins: [
                        require('autoprefixer')({
                            overrideBrowserslist
                        })
                    ]
                }
            }
        }
    };

    return config;
};

```