# ksr
## 构建器
> 完整的构建流程
> 1. 开发环境 , 热刷新hot reload , server middleware support reload
> 2. 自动按入口, 分割代码 , 默认单入口
> 4. 提供mock数据模块
> 5. 生成标准文档 [TODO]
> 5. 集成测试 [TODO]

### 使用

默认dev 与 build 会自动查找根目录下的index.html作为启动入口 , 可通过`ksr dev -e`或`ksr build -e`修改 , 逗号分隔可加载多入口 , 可使用glob模式 , 如是js文件作为入口 , 则不会有html 预览

```bash

$ ksr --help

  Usage: ksr [options] [command]

  Options:

    -V, --version  output the version number
    -h, --help     output usage information

  Commands:

    dev            dev server #保持统一 , 未使用 webpack dev server 使用 webpack-dev-middleware webpack-hot-client
    build          build project
    mock           mock server
    test           test project
    help [cmd]     display help for [cmd]


#开发环境
$ ksr dev --help

  Usage: ksr-dev [options]

  Options:
    -e, --entry [entry]                entry files (,) separated, glob mode , need to quote (default: ["index.html"])
    -m, --mock [mock]                  mock files (,) separated , glob mode , need to quote , default "./mock/**/*.js , ./mock/**/*.json" (default: ["./mock/**/*.js","./mock/**/*.json"])
    --monitor                          enable monitor
    --monitorurl [monitorurl]          monitor report url
    --monitorproduct [monitorproduct]  monitorproduct name
    --monitorpanel                     enable monitorpanel
    --monitorfps                       enable monitorfps
    --monitorerror                     enable monitorerror
    --polyfill [polyfill]              add polyfill (default: "true")
    -p, --port [port]                  dev start port , default 3601 (default: 3601)
    -h, --host [host]                  dev start host , default 127.0.0.1 (default: "127.0.0.1")
    --cdn [cdn]                        static cdn domain
    --proxy [proxy]                    proxy file , default ".proxy.js" (default: ".proxy.js")
    --config [config]                  config file , default ".ksr.conf.js" (default: ".ksr.conf.js")
    --server-config [serverConfig]     serverConfig file , default ".ksr.serve.conf.js" (default: ".ksr.serve.conf.js")
    --middleware [middleware]          middleware file , 逗号分隔
    -s, --static [static]              static dir , 逗号分隔 , 默认是当前目录下的dist (default: ["dist"])
    --mport [mport]                    mock start port , default 3500 (default: 3500)
    --mhost [mhost]                    mock start host , default 127.0.0.1 (default: "127.0.0.1")
    -h, --help                         output usage information



#构建
$ ksr build --help

  usage: ksr-build [options]

  Options:
    -e, --entry [entry]                entry files (,) separated, glob mode , need to quote (default: ["index.html"])
    --watch                            watch mode
    --monitor                          enable monitor
    --monitorurl [monitorurl]          monitor report url
    --monitorproduct [monitorproduct]  monitorproduct name
    --monitorpanel                     enable monitorpanel
    --monitorfps                       enable monitorfps
    --monitorerror                     enable monitorerror
    --cdn [cdn]                        static cdn domain
    --min [min]                        min file (default: "true")
    --polyfill [polyfill]              add polyfill (default: "true")
    --hash [hash]                      enable hash filename (default: "true")
    --library [library]                设置包名称
    --target [target]                  设置包导出格式 , 可选值: `umd|amd|amd-require|commonjs2|this|window|global|commonjs|system|jsonp`
    --output [output]                  output path (default: "dist")
    --config [config]                  config file , default ".ksr.conf.js" (default: ".ksr.conf.js")
    -s, --static [static]              static dir , 逗号分隔 , 默认是当前目录下的dist (default: ["dist"])
    -h, --help                         output usage information


#mock数据
$ ksr mock --help

  Usage: ksr-mock [options]

  Options:

    -f, --files [files]  mock files (,) separated ,glob mode , need to quote , default "./mock/**/*.js , ./mock/**/*.json" (default: ./mock/**/*.js,./mock/**/*.json,!./node_modules/**/*)
    -p, --port [port]    mock start port, default 3500 (default: 3500)
    -h, --host [host]    mock start host, default 127.0.0.1 (default: 127.0.0.1)
    -h, --help           output usage information
```

1. dev 可以额外加入webpack配置
默认文件为根目录下的`.ksr.conf.js` , 可通过 `--config` 参数 自定义加载的配置文件
配置内容webpack部分 , 请参见 webpack 4 对应的[文档](https://webpack.js.org/api/module-methods/#import)
配置对象增加 ksr , ksrServe, 如下所示

2. entry -e 参数新增自定义文件路径 `./index.html:path=[dir]/[filename]:link=./test.js` , 冒号后面的为支持参数
    1. 支持设置项
        1. `path` 设置, 输出文件路径 , 相对于输出根路径
        3. `link` 如果是 `html` 入口, 这是引入的默认 `js、ts` 入口, 如果没有按取与 `html` 同名 `js、ts` 做入口 如找不到对应文件则不设定入口依赖
    2. 支持数据插值
        1. `[dir]`, 文件所在源目录, 相对于执行路径 
        2. `[filename]`, 文件名称, 带后缀
        3. `[basename]`, 文件名称, 不带后缀
        4. `[ext]`, 文件后缀


```javascript
const filename = isdev ? '[name]' : '[name].[chunkhash:6].min';
module.exports = {
    ...webpack4_config,
    ksr:{ //增加的额外配置 , 默认配置
        root: '.', //项目根目录 ,一般不需要更改
        src: 'src',  //源码目录一般不需要更改
        dist: 'dist', //输出目录  一般不需要更改
        filename: filename, //除入口文件输出使用名称外 , miniCssExtractPlugin也使用此配置一般不需要更改
        chunkFilename: `chunks/${filename}`,  //除入口文件输出使用名称外 , miniCssExtractPlugin也使用此配置 一般不需要更改
        assetsName: isdev ? `[name].[ext]` : `[name].[hash].[ext]`,一般不需要更改
        assetsPublicPath: '/', // cdn 使用的也是此目录 一般不需要更改
        assetsOutPath: 'assets/', //资源输出目录 一般不需要更改
        //webpack-hot-client 配置
        hot:{},
        //webpack-dev-middleware 配置
        dev:{},
        //styl主题文件
        stylTheme: 'src/themes/default.styl',
        //转换查找文件路径 , 默认是以命令执行目录为准 , 一般不需要设置
        pathConvert: (file) => {
            return !path.isAbsolute(file) ?
                path.resolve(process.cwd(), file)
                : file;
        },
        //最后的机会改变最终打包使用的 `webpack` 配置 , 要求返回符合规范的 `webpack` 配置 , 一般不需要设置
        transform: (webpack) => {
            return webpack
        }
    },
    //与下方.ksr.serve.conf.js配置相同 , 此配置项在dev 环境下会合并.ksr.serve.conf.js配置 , 并作为第一优先
    ksrServe:{

    }
}
```

2. 支持额外的 .babelrc 配置文件 [babel](https://babeljs.io/docs/usage/babelrc/)
3. 支持额外的 postcss.config.js 配置文件 [postcss](https://github.com/postcss/postcss)
4. 支持代理设置 .proxy.js  代理相关配置 , 与`.ksr.serve.conf.js`文件中proxy选项合并 , `.ksr.serve.conf.js`文件中proxy优先 , 语法请参见 [http-proxy](https://github.com/nodejitsu/node-http-proxy)
5. **一般不需配置** 增加`.ksr.serve.conf.js`文件 , **此文件需要在线上环境运行, dev 环境也会使用此配置 , 如设置不能再线上运行需要注意判断线上线下环境 **, 所有在此文件中添加的模块依赖需要添加到 `package.json` 的 `dependencies`选项中 具体参数 如下所示:

```js
module.exports = {
    static:[],
    middleware:[],
    proxy: { //[http-proxy-middleware](https://github.com/chimurai/http-proxy-middleware#options)
      "/api": "http://localhost:3000",
      "/api1": {
          target: "http://localhost:3000",
          pathRewrite: {"^/api" : ""}
      },
      "/api2": {
          target: "https://other-server.example.com",
          secure: false
       },
       "/api3": {
           target: "http://localhost:3000",
           bypass: function(req, res, proxyOptions) {
             if (req.headers.accept.indexOf("html") !== -1) {
               console.log("Skipping proxy for browser request.");
               return "/index.html";
             }
           }
        }
    }
}

```



### 配置合并规则
1. `.ksr.conf.js`
    1. `ksr` 会合并默认配置与 `cli` 传入部分参数 , 优先级 `cli` > `ksr` > `default`
    2. `ksrServe` 会合并 `.ksr.serve.conf.js` 配置与 `cli` 传入部分参数 , 优先级 , `cli` > `ksrServe` > `.ksr.serve.conf.js`
        1. `proxy`会合并`.proxy.js`配置 , 优先级 `proxy` > `.proxy.js`
    3. 剩下的参数会智能合并到 默认的 `webpack` 配置 , 不会覆盖只会合并 优先级 `.ksr.conf.js` > `default` , 使用`ksr.transform`可在构建开始前更改webpack 配置
2. `.ksr.serve.conf.js`
    1. `proxy`会合并`.proxy.js`配置 , 优先级 `proxy` > `.proxy.js`
    2. 剩下的参数会合并 `cli` 参数 , 优先级 `cli` > `.ksr.serve.conf.js`



***注意需要压缩的话,tree shaking请使用`ksr build --min` 默认开启***

### 依赖项(只列出了一些比较重要的)
1. webpack
2. koa
3. node 9
4. postcss
5. stylus
6. babel
7. eslint
8. less  等等等