zero

简介

由于webpack配置过于繁琐，每次搭建环境耗时较久，需要升级react，或者webpack时需要每个项目都更新配置,太过于麻烦。所以弄一个cli命令提供项目使用.

特性

* 内置 css,babel,postcss,devServer,styleComponent,dva等
* 支持本地mock

使用

## 安装
$ npm i @yhcn/zero -g
## 检查版本
zero -v
1.0.0

## 本地开发
$ zero dev

## 编译
$ zero build
 
## 不安装全局
在package中配置scripts
列： dev:"zero dev"

Mock

zero dev 支持 mock 功能，在根目录新疆mock文件夹，里面存放根接口对应路径的文件

列：/mock/activity/user/xxx.do 那么请求 /activity/user/xxx.do 会返回上面文件的内容

使用 public 目录

我们约定 public 目录下的文件会在 dev 和 build 时被自动 copy 到输出目录（默认是 ./dist）下。所以可以在这里存放 favicon, iconfont, html, html 里引用的图片等。

配置(参考zero)

zero 的 webpack 部分功能是基于 af-webpack 实现的。如需配置，在项目根目录新建 .webpackrc 完成，格式为 JSON，比如：

{
  "externals": { "react": "window.React" }
}

如果你偏爱 JS 的配置方式，或者需要通过编程的方式做一些判断或者抽象，可以用 .webpackrc.js配置文件，支持 ES6 语法，比如：

export default {
  externals: { react: 'window.React' },
}

索引：

entry
theme
define
externals
alias
extraResolveExtensions
browserslist
publicPath
outputPath
devtool
commons
hash
html
disableCSSModules
disableCSSSourceMap
extraBabelPresets
extraBabelPlugins
extraBabelIncludes
copy
proxy
sass
manifest
ignoreMomentLocale
disableDynamicImport
env

entry

指定 webpack 入口文件，支持 glob 格式。

比如你的项目是多页类型，会希望把 src/pages 的文件作为入口。可以这样配：

"entry": "src/pages/*.js"

theme

配置主题，实际上是配 less 变量。支持对象和字符串两种类型，字符串需要指向一个返回配置的文件。比如：

"theme": {
  "@primary-color": "#1DA57A"
}

或者，

"theme": "./theme-config.js"

define

通过 webpack 的 DefinePlugin 传递给代码，值会自动做 JSON.stringify 处理。比如：

"define": {
  "process.env.TEST": 1,
  "USE_COMMA": 2,
}

externals

配置 webpack 的?externals?属性。比如：

// 配置 react 和 react-dom 不打入代码
"externals": {
  "react": "window.React",
  "react-dom": "window.ReactDOM"
}

alias

配置 webpack 的 resolve.alias 属性。

extraResolveExtensions

配置 webpack 的 resolve.extensions 属性。

browserslist

配置 browserslist，同时作用于 babel-preset-env 和 autoprefixer。比如：

"browserslist": [
  "> 1%",
  "last 2 versions"
]

publicPath

配置 webpack 的 output.publicPath 属性。

outputPath

配置 webpack 的?output.path?属性。

devtool

配置 webpack 的 devtool 属性。

commons

配置 webpack 的 CommonsChunkPlugin 插件，格式为数组，有几项配几个 CommonsChunkPlugin 。

比如：

"commons": [
  {
    async: '__common',
    children: true,
    minChunks(module, count) {
      if (pageCount <= 2) {
        return count >= pageCount;
      }
      return count >= pageCount * 0.5;
    },
  },
]

hash

配置让构建产物文件名带 hash，通常会和 manifest 配合使用。

html

配置 html-webpack-plugin 插件。

比如：

"html": {
  "template": "./src/index.ejs"
}

disableCSSModules

禁用 CSS Modules。

disableCSSSourceMap

禁用 CSS 的 SourceMap 生成。

extraBabelPresets

定义额外的 babel preset 列表，格式为数组。

extraBabelPlugins

定义额外的 babel plugin 列表，格式为数组。

extraBabelIncludes

定义额外需要做 babel 转换的文件匹配列表，格式为数组。

copy

定义需要单纯做复制的文件列表，格式为数组，项的格式参考 copy-webpack-plugin 的配置。

比如：

"copy": [
  {
    "from": "",
    "to": ""
  }
]

proxy

配置 webpack-dev-server 的 proxy 属性。如果要代理请求到其他服务器，可以这样配：

"proxy": {
  "/api": {
    "target": "http://jsonplaceholder.typicode.com/",
    "changeOrigin": true,
    "pathRewrite": { "^/api" : "" }
  }
}

然后访问?/api/users?就能访问到?http://jsonplaceholder.typicode.com/users?的数据。

sass

配置 node-sass 的选项。注意：使用 sass 时需在项目目录安装 node-sass 和 sass-loader 依赖。

manifest

配置后会生成 manifest.json，option 传给 https://www.npmjs.com/package/webpack-manifest-plugin。比如：

"manifest": {
  "basePath": "/app/"
}

ignoreMomentLocale

忽略 moment 的 locale 文件，用于减少尺寸。

disableDynamicImport

禁用 import() 按需加载，全部打包在一个文件里，通过 babel-plugin-dynamic-import-node-sync 实现。

env

针对特定的环境进行配置。dev 的环境变量是?development，build 的环境变量是?production。比如：

"extraBabelPlugins": ["transform-runtime"],
"env": {
  "development": {
    "extraBabelPlugins": ["dva-hmr"]
  }
}

这样，开发环境下的 extraBabelPlugins 是?["transform-runtime", "dva-hmr"]，而生产环境下是?["transform-runtime"]。

环境变量

可环境变量临时配置一些参数，包括：

PORT，端口号，默认 8000
HOST，默认 localhost
ANALYZE，是否在 build 时分析构建产物
ESLINT，设为 none 时禁用 eslint 检测
TSLINT，设为 none 时禁用 tslint 检测
COMPRESS, 设为 none 时 build 时不压缩
BROWSER, 设为 none 时不自动打开浏览器

比如使用 3000 端口启动 dev server，

# OS X, Linux
$ PORT=3000 zero dev

# Windows (cmd.exe)
$ set PORT=3000&&zero dev

# Or use cross-env for all platforms
$ cross-env PORT=3000 zero dev

@yhcn/zero