ksr

构建器

完整的构建流程

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

使用

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

$ 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 对应的文档 配置对象增加 ksr , ksrServe, 如下所示

2. entry -e 参数新增自定义文件路径 ./index.html:path=[dir]/[filename]:link=./test.js , 冒号后面的为支持参数

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

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
3. 支持额外的 postcss.config.js 配置文件 postcss
4. 支持代理设置 .proxy.js 代理相关配置 , 与.ksr.serve.conf.js文件中proxy选项合并 , .ksr.serve.conf.js文件中proxy优先 , 语法请参见 http-proxy
5. 一般不需配置 增加.ksr.serve.conf.js文件 , **此文件需要在线上环境运行, dev 环境也会使用此配置 , 如设置不能再线上运行需要注意判断线上线下环境 **, 所有在此文件中添加的模块依赖需要添加到 package.json 的 dependencies选项中 具体参数 如下所示:

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 等等等