feat(cli): support custom postcss config

This commit is contained in:
陈嘉涵 2020-01-12 17:41:36 +08:00
parent 0406579b9b
commit 6ce9f5598a
4 changed files with 72 additions and 9 deletions

View File

@ -210,7 +210,7 @@ module.exports = {
`@vant/cli/preset`中默认包含了以下插件:
- @babel/preset-env
- @babel/preset-env(不含 core-js
- @babel/preset-typescript
- @babel/plugin-transform-runtime
- @babel/plugin-transform-object-assign
@ -238,4 +238,32 @@ module.exports = {
"@vue/babel-helper-vue-jsx-merge-props": "^1.0.0"
}
}
```
```
## Postcss
通过根目录下的`postcss.config.js`文件可以对 Postcss 进行配置。
### 默认配置
`vant-cli`中默认的 Postcss 配置如下:
```js
module.exports = {
plugins: {
autoprefixer: {}
}
};
```
## browserslist
推荐在`package.json`文件里添加 browserslist 字段,这个值会被`@babel/preset-env``autoprefixer`用来确定目标浏览器的版本,保证编译后代码的兼容性。
在移动端浏览器中使用,可以添加如下配置:
```json
{
"browserslist": ["Android >= 4.0", "iOS >= 8"]
}
```

View File

@ -22,7 +22,8 @@ export const DOCS_DIR = join(ROOT, 'docs');
export const SITE_DIST_DIR = join(ROOT, 'site');
export const VANT_CONFIG_FILE = join(ROOT, 'vant.config.js');
export const PACKAGE_JSON_FILE = join(ROOT, 'package.json');
export const WEBPACK_CONFIG_FILE = join(ROOT, 'webpack.config.js');
export const ROOT_WEBPACK_CONFIG_FILE = join(ROOT, 'webpack.config.js');
export const ROOT_POSTCSS_CONFIG_FILE = join(ROOT, 'postcss.config.js');
export const DIST_DIR = join(__dirname, '../../dist');
export const CONFIG_DIR = join(__dirname, '../config');

View File

@ -7,7 +7,12 @@ import {
readFileSync,
outputFileSync
} from 'fs-extra';
import { SRC_DIR, getVantConfig, WEBPACK_CONFIG_FILE } from './constant';
import {
SRC_DIR,
getVantConfig,
ROOT_WEBPACK_CONFIG_FILE,
ROOT_POSTCSS_CONFIG_FILE
} from './constant';
export const EXT_REGEXP = /\.\w+$/;
export const SFC_REGEXP = /\.(vue)$/;
@ -96,8 +101,8 @@ export function normalizePath(path: string): string {
}
export function getWebpackConfig(): object {
if (existsSync(WEBPACK_CONFIG_FILE)) {
const config = require(WEBPACK_CONFIG_FILE);
if (existsSync(ROOT_WEBPACK_CONFIG_FILE)) {
const config = require(ROOT_WEBPACK_CONFIG_FILE);
if (typeof config === 'function') {
return config();
@ -109,6 +114,14 @@ export function getWebpackConfig(): object {
return {};
}
export function getPostcssConfig(): object {
if (existsSync(ROOT_POSTCSS_CONFIG_FILE)) {
return require(ROOT_POSTCSS_CONFIG_FILE);
}
return {};
}
export type ModuleEnv = 'esmodule' | 'commonjs';
export type NodeEnv = 'production' | 'development' | 'test';
export type BuildTarget = 'site' | 'package';
@ -129,8 +142,8 @@ export function isDev() {
return process.env.NODE_ENV === 'development';
}
// Smarter outputFileSync
// Skip if content unchanged
// smarter outputFileSync
// skip output if file content unchanged
export function smartOutputFile(filePath: string, content: string) {
if (existsSync(filePath)) {
const previousContent = readFileSync(filePath, 'utf-8');

View File

@ -1,5 +1,26 @@
module.exports = {
import { getPostcssConfig } from '../common';
type PostcssConfig = object & {
plugins?: object;
};
function mergePostcssConfig(config1: PostcssConfig, config2: PostcssConfig) {
const plugins = {
...config1.plugins,
...config2.plugins
};
return {
...config1,
...config2,
plugins
};
}
const DEFAULT_CONFIG = {
plugins: {
autoprefixer: {}
}
};
module.exports = mergePostcssConfig(DEFAULT_CONFIG, getPostcssConfig());