1 | # Ykit [![CircleCI](https://circleci.com/gh/YMFE/ykit.svg?style=shield)](https://circleci.com/gh/YMFE/ykit)
|
2 |
|
3 | Ykit 是一个基于 Webpack 的打包工具,它利用插件机制封装了各种 JavaScript 应用的配置,选择和安装合适的插件即可开始构建你的 App。Ykit 内置了各种优化和辅助工具,让你的应用开发更稳定、高效。
|
4 |
|
5 | ## 特性
|
6 |
|
7 | 1. 包含 hot reloading 本地 server,无需在项目中配置
|
8 | 2. 比 Webpack 更快的编译打包速度
|
9 | 3. 通过插件可快速定制开发环境
|
10 | 4. 内置 eslint 和代理工具
|
11 |
|
12 | ## 和 Webpack 性能对比
|
13 |
|
14 | 本地 server 访问页面资源加载和页面渲染时间:
|
15 |
|
16 | | 资源数 | Webpack 耗时 | Ykit 耗时 |
|
17 | |---------|-------|-------|
|
18 | | 3 assets | 9s | 5s |
|
19 | | 10 assets | 18s | 5s |
|
20 | | 20 assets | 33s | 5s |
|
21 |
|
22 | build(包含压缩)时间:
|
23 |
|
24 | | 资源数 | Webpack 耗时 | Ykit 耗时 |
|
25 | |---------|-------|-------|
|
26 | | 3 assets | 10s | 7s |
|
27 | | 10 assets | 20s | 16s |
|
28 | | 20 assets | 38s | 32s |
|
29 |
|
30 | 测试工程:[https://github.com/roscoe054/ykit-benchmark](https://github.com/roscoe054/ykit-benchmark)
|
31 |
|
32 | ## 快速开始
|
33 |
|
34 | 1. `npm install ykit -g`
|
35 | 2. `mkdir ykit-app && cd ykit-app`
|
36 | 3. `ykit init`
|
37 | 4. `cd .. && ykit server`
|
38 | 5. 用浏览器访问 `http://localhost/ykit-app/index.html`
|
39 |
|
40 | 初始化结束后,项目中会生成一个名为 `ykit.js` 的配置文件:
|
41 |
|
42 | ```javascript
|
43 | module.exports = {
|
44 | plugins: [],
|
45 | config: {
|
46 | export: ['./scripts/index.js', './styles/index.css'],
|
47 | modifyWebpackConfig: function modifyWebpackConfig(baseConfig) {
|
48 | // 更改 Webpack 配置
|
49 | return baseConfig;
|
50 | }
|
51 | },
|
52 | hooks: {},
|
53 | commands: []
|
54 | };
|
55 | ```
|
56 |
|
57 | ## 配置文件选项
|
58 |
|
59 | - **plugins** - 插件是对一类配置和功能的封装,通过安装插件可以快速搭建开发环境
|
60 | - **config.exports** - 资源入口
|
61 | - **config.modifyWebpackConfig** - 用来更改 Webpack 现有配置的函数
|
62 | - **hooks** - 打包过程钩子
|
63 | - **commands** - 自定义命令
|
64 |
|
65 | ## 范例
|
66 |
|
67 | 通过插件快速搭建不同类型的应用,可参考以下示例。
|
68 |
|
69 | - [ykit-starter-yo][2]
|
70 | - [ykit-starter-react][3]
|
71 | - [ykit-starter-vue][4]
|
72 | - [ykit-starter-antd][5]
|
73 |
|
74 | ## 文档
|
75 |
|
76 | 访问 [http://ued.qunar.com/ykit/][1] 来获取更多 ykit 的文档。
|
77 |
|
78 | [1]: http://ued.qunar.com/ykit/index.html
|
79 | [2]: https://github.com/roscoe054/ykit-starter-yo
|
80 | [3]: https://github.com/roscoe054/ykit-starter-react
|
81 | [4]: https://github.com/roscoe054/ykit-starter-vue
|
82 | [5]: https://github.com/roscoe054/ykit-starter-antd
|