ko-script
ko-script
支持 react,vue, react-ts快速打包,让你不再纠结 webpack,vue,ts配置
Installation
$ yarn add ko-script -g
$ yarn add ko-script --dev
Getting Started
Use basics
1. ko init 初始项目模版文件 效果如:[create-react-app]
2. ko dll 生成动态连接库
3. ko dev 启动本地开发环境
4. ko build 编译项目到生产环境
5. ko preview 预览编译后项目静态文件
6. ko move 默认移动文件(可配置)
7. ko swagger 生成swagger接口文件(可选js/ts),用户自定义请放在restful.js
9. ko install 安装已发布npm包组件或者区块
10.ko create 创建页面或者组件目录及文件
11. ko [xx] -h 查看相关命令参数使用
Use advanced
自定义配置,遵循commjs语法,在项目根目录创建 ko.config.js 结构如下:
module.exports = (context) => {
const { webpack } = context;
return {
dll:[], //自定义dll打包modules,默认dependencies中的模块包
server: { //本地服务配置
"host": "127.0.0.1",
"port": 3002
},
proxy: [{ //接口代理配置,解决跨域问题
"context": ["/auth", "/api"],
"target": "http://localhost:3000"
}],
move: {
"from"://移动目录或文件
"to": //目标地址
},
webpack:{ //自定义webpack配置
entry:{},
output:{},
modules:{}
...
}
}
}
@babel/polyfill 垫片使用
1.import "@babel/polyfill" //当使用es6新实例,需引入此垫片
Global Configuration
1.在项目public目录下新建config目录,并新建文件conf.dev.js/conf.prod.js
2.conf.dev.js/conf.prod.js 示例如下:
var FRONT_CONF = {
LOGO: '/img/logo.png', // 项目logo
COPY_RIGHT: (new Date()).getFullYear() + ' 杭州玳数科技有限公司 浙ICP备15044486号-1',
}
Project directory
project
├── public // 公共资源文件(第三方资源库,项目模板文件,全局配置文件config)
├── src
│ ├── components // 公共组件
│ ├── layouts // 通用布局
│ ├── pages // 页面
│ └── index.js/index.tsx // 默认入口文件,可手动配置
├── dll // 构建后的动态链接库文件
├── dist // 构建后的前端静态资源
│ ├── index.html
│ ├── css
│ └── js
├── ko.config.js // 自定义配置文件
├── package.json // package.json
└── README.md // 项目说明
Tips
v3版本以上仅支持babel-loader8;
react支持ts,并且ts,tsx和js,jsx可以共存,但是如果使用es6新语法,诸如 await,箭头函数,const等,需要将文件改为ts或者tsx;
文件路径别名问题,如果使用tsx,webpack中别名配置将会报错,需要在tsconfig中配置path别名
Dependencies
@kodesign/ko-babel-app: ^8.0.1assets-webpack-plugin: ^3.9.10autoprefixer: ^9.7.3awesome-typescript-loader: ^5.2.1babel-loader: ^8.0.6babel-plugin-import: ^1.13.0camelcase: ^5.3.1case-sensitive-paths-webpack-plugin: ^2.2.0clean-webpack-plugin: 1.0.0colors: ^1.4.0commander: ^4.1.0compressing: ^1.5.0copy-webpack-plugin: ^5.1.1css-loader: ^3.4.1decamelize: ^3.2.0deep-assign: ^3.0.0deepmerge: ^4.2.2detect-port: ^1.3.0download-git-repo: ^3.0.2file-loader: ^5.0.2fork-ts-checker-webpack-plugin: ^3.1.1friendly-errors-webpack-plugin: ^1.7.0happypack: ^5.0.1hard-source-webpack-plugin: ^0.13.1html-webpack-plugin: ^3.2.0inquirer: ^7.0.3less: ^3.10.3less-loader: ^5.0.0lodash: ^4.17.15mini-css-extract-plugin: ^0.9.0moment: ^2.24.0mustache: ^3.2.1node-sass: ^4.13.0optimize-css-assets-webpack-plugin: ^5.0.3ora: ^4.0.3postcss-loader: ^3.0.0pushstate-server: ^3.1.0react-dev-utils: ^9.0.3request: ^2.88.0request-progress: ^3.0.0request-promise: ^4.2.5sass-loader: ^8.0.0shelljs: ^0.8.3style-loader: ^1.1.2ts-loader: ^6.2.1tsconfig-paths-webpack-plugin: ^3.2.0typescript: ^3.7.4url: ^0.11.0url-loader: ^3.0.0urllib: ^2.34.2user-home: ^2.0.0vue-loader: ^15.8.3vue-template-compiler: ^2.6.11webpack: ^4.41.5webpack-bundle-analyzer: ^3.6.0webpack-cli: ^3.3.10webpack-dev-server: ^3.10.1webpack-filter-warnings-plugin: ^1.2.1webpack-merge: ^4.2.2webpack-simple-progress-plugin: ^0.0.4