Ada (阿打)

基于 Webpack 和 Postcss 的前端打包工具

起因

工作中经常遇到一些零散活动需求,分散在不同项目,部分项目是后端维护的。每个项目写打包配置文件,维护太麻烦,就将所有配置写在了一个命令行工具,脱离业务代码。

功能

  1. JavaScript 支持 ES6+ 的语法,构建代码支持 Uglify;
  2. CSS 支持 SCSS 语法,使用 Postcss 做代码优化,支持 Cssnano, Autoprefixer;
  3. 支持 React, Vue 打包;
  4. 支持实时刷新, React 和 Vue 可以热刷新;
  5. 支持自动生成雪碧图;
  6. 支持自动转换 px 到 rem;
  7. 支持 SourceMap,方便调试;
  8. 可以自定义 Webpack, Postcss 配置。

安装

npm i -g ada

使用帮助

  1. 运行ada,启动开发服务器,默认端口 8080;
  2. 运行ada build,构建生产环境包,默认目录 dist;
  3. src/icons 目录里边的 png 图片会自动生成雪碧图,scss 代码中只需引入自动生成的 sprites/sprites.scss 文件,然后使用 @include sprite($logo); 既可以使用雪碧图,docs/src/scss/test.scss可做参考;
  4. 运行ada help,查看各参数功能。
ada.js [cmd] [args]

命令:
  ada.js build  生成线上包
  ada.js        打开开发服务器                                          [默认值]

选项:
  --debug                 调试模式                        [布尔] [默认值: false]
  --host                  服务器监听IP            [字符串] [默认值: "127.0.0.1"]
  --port                  服务器监听端口                   [数字] [默认值: 8080]
  --cwd                   工作目录
                               [字符串] [默认值: "/Users/ccbikai/code/node/ada"]
  --src, --srcDir         源代码目录                    [字符串] [默认值: "src"]
  --dist, --distDir       编译后代码目录               [字符串] [默认值: "dist"]
  --public, --publicPath  静态资源CDN目录                  [字符串] [默认值: ""]
  --hotVue                Vue 使用热刷新模式              [布尔] [默认值: false]
  --hotReact              React 使用热刷新模式            [布尔] [默认值: false]
  --noRem                 不自动转换 rem                  [布尔] [默认值: false]
  --noPx                  自动转换 rem, 并且替换掉 px     [布尔] [默认值: false]
  --analyze               开启性能分析模式                [布尔] [默认值: false]
  --config, -c            自定义 webpack 配置              [字符串] [默认值: ""]
  --postcss, -p           自定义 postcss 配置              [字符串] [默认值: ""]
  -h, --help              显示帮助信息                                    [布尔]
  -v, --version           显示版本号                                      [布尔]
                    

示例代码

查看源代码 docs 目录,里边内容使用 ada 构建。

文件目录

src 目录为源代码目录,可以自定义。

.
├── index.html
├── test.html
├── test.react.html
├── test.vue.html
├── src
│   ├── components
│   │   ├── About.jsx
│   │   ├── About.vue
│   │   ├── Header.jsx
│   │   ├── Header.vue
│   │   ├── Home.jsx
│   │   ├── Home.vue
│   │   ├── Loading.jsx
│   │   ├── Static.jsx
│   │   └── Static.vue
│   ├── hbs
│   │   ├── helpers
│   │   │   └── sex.js
│   │   ├── main.hbs
│   │   └── partials
│   │       └── footer.hbs
│   ├── icons
│   │   ├── facebook.png
│   │   ├── html5.png
│   │   ├── instagram.png
│   │   ├── twitter.png
│   │   └── youtube.png
│   ├── images
│   │   ├── big.jpg
│   │   └── logo.png
│   ├── js
│   │   ├── App.jsx
│   │   ├── App.vue
│   │   ├── actions
│   │   │   └── index.js
│   │   ├── common
│   │   │   ├── index.js
│   │   │   └── lazy.js
│   │   ├── index.js
│   │   ├── mutations
│   │   │   └── index.js
│   │   ├── reducers
│   │   │   ├── index.js
│   │   │   └── name.js
│   │   ├── routes
│   │   │   └── index.js
│   │   ├── test.js
│   │   ├── test.react.js
│   │   ├── test.vue.js
│   │   └── types
│   │       └── index.js
│   ├── scss
│   │   ├── common
│   │   │   └── layout.scss
│   │   ├── index.scss
│   │   ├── test
│   │   │   ├── react.scss
│   │   │   └── vue.scss
│   │   └── test.scss
│   └── sprites
│       ├── sprites.png
│       └── sprites.scss
└── dist
    ├── assets
    │   ├── big.875f6f.jpg
    │   └── sprites.a78a7f.png
    ├── css
    │   ├── index.css
    │   ├── test.css
    │   ├── test.react.css
    │   └── test.vue.css
    ├── js
    │   ├── 0.bundle.js
    │   ├── index.js
    │   ├── react-import.bundle.js
    │   ├── test.js
    │   ├── test.react.js
    │   ├── test.vue.js
    │   ├── vue-about.bundle.js
    │   └── vue-static.bundle.js
    └── maps
        ├── css
        │   ├── index.css.map
        │   ├── test.css.map
        │   ├── test.react.css.map
        │   └── test.vue.css.map
        └── js
            ├── 0.bundle.js.map
            ├── index.js.map
            ├── index.scss.js.map
            ├── react-import.bundle.js.map
            ├── test.js.map
            ├── test.react.js.map
            ├── test.scss.js.map
            ├── test.vue.js.map
            ├── vue-about.bundle.js.map
            └── vue-static.bundle.js.map
                    

功能测试