Ykit

Introduction

Ykit

Ykit 是一套可配置和可扩展的前端开发工具集,核心功能包括资源打包、静态资源服务、代码质量检测。Ykit 基于 webpack,支持 CommonJs, AMD, ES6 modules, Coffeescript, CSS, SASS, LESS 等模块类型的打包。

Ykit 的初衷在于快速搭建不同的开发环境。它提供一个可靠的基础配置,通过可插拔的插件来进行扩展(编译插件、服务中间件、工具和命令...),并让开发者可以灵活地根据不同项目来修改配置。

详细文档请查看 http://ued.qunar.com/ykit/docs.html

Features

  • 本地静态资源服务
  • 一键配置的开发环境
  • 自带 lint 工具和预设规则
  • 自带代理工具,可实现 SwitchHost + Charles 的基本功能

Install

(sudo) npm install ykit -g

Usage

Init

通过 init 命令快速搭建一个项目脚手架:

  1. 创建一个项目目录
  2. 进入目录执行 ykit init [<type>]

初始化时可以选择项目类型(type 留空则为基础脚手架),目前支持的初始化类型:

  • yo
  • qunar

Server

在项目目录外执行命令:

(sudo) ykit server // 或者使用缩写 ykit s

访问 localhost/项目目录/index.html

Pack

在项目中执行命令:

ykit pack -m

将会对资源进行编译打包压缩,默认会打到 prd 目录。

配置 ykit.{type}.js

项目中的配置文件。其中 type 指的是当前项目环境的名称。比如 ykit.js(基础环境)、ykit.yo.js 或者 ykit.qunar.js。配置文件样例:

exports.config = function() {
    return {
        // export 定义项目资源入口,在本地服务请求时,会实现 /src -> /prd 目录的对应
        // 比如在 html 中请求 /prd/script/index.js,则会编译 /src/script/index.js 并返回编译结果
        export: ['./scripts/index.js', './styles/index.scss',],

        // ykit 本身会有基础 webpack 配置
        // 通过该函数可以获取(通过参数 baseConfig)和修改它
        modifyWebpackConfig: function(baseConfig) {
            // ...
            return baseConfig
        }
    }
};

详细配置请参考 ykit-配置

Changelog

Changelog