ykit

高可用高扩展前端开发工具

  • ykit

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
ykit
0.8.135 years ago8 years agoMinified + gzip package size for ykit in KB

Readme

Ykit CircleCI
Ykit 是一个基于 Webpack 的打包工具,它利用插件机制封装了各种 JavaScript 应用的配置,选择和安装合适的插件即可开始构建你的 App。Ykit 内置了各种优化和辅助工具,让你的应用开发更稳定、高效。

特性

  1. 包含 hot reloading 本地 server,无需在项目中配置
  2. 比 Webpack 更快的编译打包速度
  3. 通过插件可快速定制开发环境
  4. 内置 eslint 和代理工具

和 Webpack 性能对比

本地 server 访问页面资源加载和页面渲染时间:
| 资源数 | Webpack 耗时 | Ykit 耗时 | |---------|-------|-------| | 3 assets | 9s | 5s | | 10 assets | 18s | 5s | | 20 assets | 33s | 5s |
build(包含压缩)时间:
| 资源数 | Webpack 耗时 | Ykit 耗时 | |---------|-------|-------| | 3 assets | 10s | 7s | | 10 assets | 20s | 16s | | 20 assets | 38s | 32s |
测试工程:https://github.com/roscoe054/ykit-benchmark

快速开始

  1. npm install ykit -g
  2. mkdir ykit-app && cd ykit-app
  3. ykit init
  4. cd .. && ykit server
  5. 用浏览器访问 http://localhost/ykit-app/index.html

初始化结束后,项目中会生成一个名为 ykit.js 的配置文件:
module.exports = {
    plugins: [],
    config: {
        export: ['./scripts/index.js', './styles/index.css'],
        modifyWebpackConfig: function modifyWebpackConfig(baseConfig) {
            // 更改 Webpack 配置
            return baseConfig;
        }
    },
    hooks: {},
    commands: []
};

配置文件选项

  • plugins - 插件是对一类配置和功能的封装,通过安装插件可以快速搭建开发环境
  • config.exports - 资源入口
  • config.modifyWebpackConfig - 用来更改 Webpack 现有配置的函数
  • hooks - 打包过程钩子
  • commands - 自定义命令

范例

通过插件快速搭建不同类型的应用,可参考以下示例。

文档

访问 ykit.ymfe.org1 来获取更多 ykit 的文档。