ksr-serve

ksr

构建器

完整的构建流程

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

使用

默认dev 与 build 会自动查找根目录下的index.html作为启动入口 , 可通过ksr dev -e或ksr build -e修改 , 逗号分隔可加载多入口 , 如是js文件作为入口 , 则dev时不会有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 (default: index.html)
    -m, --mock [mock]    mock files (,) separated ,glob mode , need to quote , default "./mock/**/*.js , ./mock/**/*.json" (default: ./mock/**/*.js,./mock/**/*.json)
    -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)
    -s, --static [static]  static dir , 逗号分隔 , 默认是当前目录下的dist (default: dist)
    --proxy [proxy]      proxy file , default ".proxy.js" (default: .proxy.js)
    --middleware [middleware]  middleware file , 逗号分隔
    --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 (default: index.html)
    --cdn [cdn]          static cdn domain
    -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

#静态服务
$ ksr serve --help

  Usage: ksr-serve [options]

  Options:

    -p, --port [port]      start port (default: 8089)
    -h, --host [host]      start port (default: 127.0.0.1)
    --proxy [proxy]        proxy file , default ".proxy.js" (default: .proxy.js)
    --middleware [middleware]  middleware file , 逗号分隔
    -s, --static [static]  static dir , 逗号分隔 , 默认是当前目录下的dist (default: dist)
    -h, --help             output usage information

1. 可以额外加入webpack配置 文件为根目录下的.ksr.conf.js或.ksr.conf.json 内容请参见 webpack 4 对应的文档 配置对象增加 ksr , 如下所示

module.exports = {
    ...webpack4_config,
    ksr:{ //增加的额外配置
        //webpack-hot-client
        hot:{},
        //webpack-dev-middleware
        dev:{},
        //styl主题文件
        stylTheme:'src/themes/default.styl' //默认是`src/themes/default.styl`,
        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. 支持额外的 .babelrc 配置文件 babel
2. 支持额外的 postcss.config.js 配置文件 postcss
3. 支持代理设置 .proxy.js , 语法请参见 http-proxy , 可根据环境变量区分线上,开发环境

注意需要压缩的话,tree shaking请使用NODE_ENV=production ksr build

依赖项(只列出了一些比较重要的,感谢开源社区)

1. webpack
2. koa
3. node 9
4. postcss
5. stylus
6. babel
7. eslint
8. less 等等等

#默认加入的包

+ history@4.7.2
+ moment@2.20.1
+ vue@2.5.16
+ lodash-es@4.17.8

发布到npm

sh npm.sh patch  #patch , minor , major , 或者是数字