# ksr > 构建器 Latest version **4.1.3** (published 2023-04-10) · MIT license · 0 weekly downloads ## Install ```sh npm install ksr pnpm add ksr yarn add ksr bun add ksr ``` Provides the command `ksr`. ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 4.1.3 | | Published | 2023-04-10 | | First published | 2018-04-11 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Node | >=7.6.0 | | Dependencies | 89 | | Unpacked size | 67.1 KB | | Known vulnerabilities | 0 (+9 in 4 direct dependencies) | | Install scripts | no | | Author | wangjianliang | | Maintainers | x6doooo, javey, lynn.wang, ws7she, hyuni, onlycl | ## Links - npm: https://www.npmjs.com/package/ksr - Repository: git@newgit.op.ksyun.com:ksc-cns-fe/ksr - npm.io page: https://npm.io/package/ksr ## Dependencies (89) - [pug](https://npm.io/package/pug.md) ^2.0.3 - [vdt](https://npm.io/package/vdt.md) ^1.2.3 - [vue](https://npm.io/package/vue.md) ^2.5.16 - [glob](https://npm.io/package/glob.md) ^7.1.2 - [less](https://npm.io/package/less.md) ^3.0.1 - [sass](https://npm.io/package/sass.md) ^1.26.3 - [vray](https://npm.io/package/vray.md) latest - [acorn](https://npm.io/package/acorn.md) ^7.1.1 - [chalk](https://npm.io/package/chalk.md) ^2.4.1 - [debug](https://npm.io/package/debug.md) ^3.1.0 - [globby](https://npm.io/package/globby.md) ^8.0.1 - [lodash](https://npm.io/package/lodash.md) ^4.17.15 - [mkdirp](https://npm.io/package/mkdirp.md) ^0.5.1 - [moment](https://npm.io/package/moment.md) ^2.20.1 - [stylus](https://npm.io/package/stylus.md) ^0.54.5 - [core-js](https://npm.io/package/core-js.md) ^3.6.4 - [cssnano](https://npm.io/package/cssnano.md) ^4.1.10 - [postcss](https://npm.io/package/postcss.md) ^7.0.25 - [webpack](https://npm.io/package/webpack.md) ^4.4.1 - [chokidar](https://npm.io/package/chokidar.md) ^3.3.1 - [prettier](https://npm.io/package/prettier.md) ^1.12.1 - [progress](https://npm.io/package/progress.md) ^2.0.0 - [@ksyun/mt](https://npm.io/package/@ksyun/mt.md) 0.0.2 - [commander](https://npm.io/package/commander.md) ^2.13.0 - [deepmerge](https://npm.io/package/deepmerge.md) ^4.2.2 - [happypack](https://npm.io/package/happypack.md) ^5.0.0 - [lodash-es](https://npm.io/package/lodash-es.md) ^4.17.10 - [ts-loader](https://npm.io/package/ts-loader.md) ^6.1.2 - [css-loader](https://npm.io/package/css-loader.md) ^3.2.0 - [ejs-loader](https://npm.io/package/ejs-loader.md) ^0.3.3 - [ksc-mocker](https://npm.io/package/ksc-mocker.md) latest - [raw-loader](https://npm.io/package/raw-loader.md) ^0.5.1 - [typescript](https://npm.io/package/typescript.md) ^3.8.2 - [url-loader](https://npm.io/package/url-loader.md) ^1.0.1 - [vdt-loader](https://npm.io/package/vdt-loader.md) ^1.4.3 - [vue-loader](https://npm.io/package/vue-loader.md) ^15.7.1 - [@babel/core](https://npm.io/package/@babel/core.md) ^7.8.7 - [es6-promise](https://npm.io/package/es6-promise.md) ^4.2.8 - [file-loader](https://npm.io/package/file-loader.md) ^1.1.11 - [html-loader](https://npm.io/package/html-loader.md) ^0.5.5 - [koa-webpack](https://npm.io/package/koa-webpack.md) ^5.0.2 - [less-loader](https://npm.io/package/less-loader.md) ^4.1.0 - [sass-loader](https://npm.io/package/sass-loader.md) ^7.0.0 - [autoprefixer](https://npm.io/package/autoprefixer.md) ^9.7.3 - [babel-loader](https://npm.io/package/babel-loader.md) ^8.0.6 - [loader-utils](https://npm.io/package/loader-utils.md) ^1.2.3 - [style-loader](https://npm.io/package/style-loader.md) ^0.20.3 - [stylus-loader](https://npm.io/package/stylus-loader.md) ^3.0.2 - [webpack-merge](https://npm.io/package/webpack-merge.md) ^4.1.3 - [css-hot-loader](https://npm.io/package/css-hot-loader.md) ^1.3.9 - [postcss-loader](https://npm.io/package/postcss-loader.md) ^3.0.0 - [dependency-tree](https://npm.io/package/dependency-tree.md) ^7.2.1 - [pug-plain-loader](https://npm.io/package/pug-plain-loader.md) ^1.0.0 - [@babel/preset-env](https://npm.io/package/@babel/preset-env.md) ^7.8.7 - [resolve-url-loader](https://npm.io/package/resolve-url-loader.md) ^2.3.0 - [@babel/preset-react](https://npm.io/package/@babel/preset-react.md) ^7.8.3 - [html-webpack-plugin](https://npm.io/package/html-webpack-plugin.md) ^3.2.0 - [ksc-webpack-plugins](https://npm.io/package/ksc-webpack-plugins.md) ^1.0.11 - [postcss-load-config](https://npm.io/package/postcss-load-config.md) ^2.1.0 - [@vue/babel-preset-jsx](https://npm.io/package/@vue/babel-preset-jsx.md) ^1.1.2 - [string-replace-loader](https://npm.io/package/string-replace-loader.md) ^2.2.0 - [terser-webpack-plugin](https://npm.io/package/terser-webpack-plugin.md) ^2.3.5 - [vue-template-compiler](https://npm.io/package/vue-template-compiler.md) ^2.5.16 - [@babel/runtime-corejs3](https://npm.io/package/@babel/runtime-corejs3.md) ^7.9.2 - [webpack-plugin-replace](https://npm.io/package/webpack-plugin-replace.md) ^1.2.0 - [mini-css-extract-plugin](https://npm.io/package/mini-css-extract-plugin.md) ^0.8.0 - [@babel/plugin-transform-spread](https://npm.io/package/@babel/plugin-transform-spread.md) ^7.8.3 - [@babel/plugin-transform-classes](https://npm.io/package/@babel/plugin-transform-classes.md) ^7.9.2 - [@babel/plugin-transform-runtime](https://npm.io/package/@babel/plugin-transform-runtime.md) ^7.8.3 - [@babel/plugin-syntax-import-meta](https://npm.io/package/@babel/plugin-syntax-import-meta.md) ^7.0.0 - [@babel/plugin-proposal-decorators](https://npm.io/package/@babel/plugin-proposal-decorators.md) ^7.0.0 - [optimize-css-assets-webpack-plugin](https://npm.io/package/optimize-css-assets-webpack-plugin.md) ^5.0.3 - [@babel/plugin-proposal-json-strings](https://npm.io/package/@babel/plugin-proposal-json-strings.md) ^7.0.0 - [@babel/plugin-syntax-dynamic-import](https://npm.io/package/@babel/plugin-syntax-dynamic-import.md) ^7.0.0 - [@babel/plugin-proposal-function-bind](https://npm.io/package/@babel/plugin-proposal-function-bind.md) ^7.0.0 - [@babel/plugin-proposal-function-sent](https://npm.io/package/@babel/plugin-proposal-function-sent.md) ^7.0.0 - [@babel/plugin-proposal-do-expressions](https://npm.io/package/@babel/plugin-proposal-do-expressions.md) ^7.0.0 - [@babel/plugin-transform-destructuring](https://npm.io/package/@babel/plugin-transform-destructuring.md) ^7.8.3 - [@vue/babel-helper-vue-jsx-merge-props](https://npm.io/package/@vue/babel-helper-vue-jsx-merge-props.md) ^1.0.0 - [@babel/plugin-proposal-class-properties](https://npm.io/package/@babel/plugin-proposal-class-properties.md) ^7.0.0 - [@babel/plugin-proposal-numeric-separator](https://npm.io/package/@babel/plugin-proposal-numeric-separator.md) ^7.0.0 - [@babel/plugin-proposal-optional-chaining](https://npm.io/package/@babel/plugin-proposal-optional-chaining.md) ^7.0.0 - [@babel/plugin-proposal-pipeline-operator](https://npm.io/package/@babel/plugin-proposal-pipeline-operator.md) ^7.0.0 - [@babel/plugin-proposal-throw-expressions](https://npm.io/package/@babel/plugin-proposal-throw-expressions.md) ^7.0.0 - [@babel/plugin-proposal-object-rest-spread](https://npm.io/package/@babel/plugin-proposal-object-rest-spread.md) ^7.8.3 - [@babel/plugin-proposal-export-default-from](https://npm.io/package/@babel/plugin-proposal-export-default-from.md) ^7.0.0 - [@babel/plugin-proposal-export-namespace-from](https://npm.io/package/@babel/plugin-proposal-export-namespace-from.md) ^7.0.0 - [@babel/plugin-proposal-nullish-coalescing-operator](https://npm.io/package/@babel/plugin-proposal-nullish-coalescing-operator.md) ^7.0.0 - [@babel/plugin-proposal-logical-assignment-operators](https://npm.io/package/@babel/plugin-proposal-logical-assignment-operators.md) ^7.0.0 ## Recent versions - 4.1.3 (latest) — 2023-04-10 - 4.1.2 — 2020-04-23 - 4.1.1 — 2020-04-23 - 4.0.5 — 2020-04-17 - 4.0.3 — 2020-04-16 - 4.0.2 — 2020-04-15 - 4.0.1 — 2020-04-14 - 4.0.0 — 2020-04-13 - 3.8.7 — 2020-04-08 - 3.8.6 — 2020-04-07 - 3.8.5 — 2020-03-31 - 3.8.3 — 2020-03-16 - 3.8.2 — 2020-03-13 - 3.8.1 — 2020-03-12 - 3.8.0 — 2020-03-11 - … 121 more at https://npm.io/package/ksr/versions ## README # 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 等等等 --- _Source: https://npm.io/package/ksr · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._