ada

<!DOCTYPE html> <html lang="zh-Hans-cmn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Ada (阿打) | 基于 Webpack 和 Postcss 的前端打包工具</title> <script type="text/javascript"> (function(d,c){var e=d.documentElement,a="orientationchange" in window?"orientationchange":"resize",b=function(){var f=e.clientWidth;if(!f){return}if(f>=750){e.style.fontSize="40px"}else{e.style.fontSize=40*(f/750)+"px"}};if(!d.addEventListener){return}b();c.addEventListener(a,b,false);d.addEventListener("DOMContentLoaded",b,false)})(document,window); // eslint-disable-line </script> <link rel="stylesheet" href="/dist/css/index.css"> </head> <body> <div class="wrap"> <header> <div class="main-wrap"> <h1>Ada (阿打)</h1> <div class="desc">基于 Webpack 和 Postcss 的前端打包工具</div> <div class="link"> <a href="https://travis-ci.org/ccbikai/ada"><img alt="Travis branch" data-src="https://img.shields.io/travis/ccbikai/ada/master.svg"/></a> <a href="https://www.npmjs.com/package/ada"><img alt="npm" data-src="https://img.shields.io/npm/v/ada.svg"/></a> <a href="https://github.com/ccbikai/ada"><img alt="GitHub stars" data-src="https://img.shields.io/github/stars/ccbikai/ada.svg?style=social&label=Stars"/></a> </div> </div> </header> <main> <div class="main-wrap"> <h2>起因</h2> <p>工作中经常遇到一些零散活动需求，分散在不同项目，部分项目是后端维护的。每个项目写打包配置文件，维护太麻烦，就将所有配置写在了一个命令行工具，脱离业务代码。</p> <h2>功能</h2> <ol> <li>JavaScript 支持 ES6+ 的语法，构建代码支持 Uglify；</li> <li>CSS 支持 SCSS 语法，使用 Postcss 做代码优化，支持 Cssnano, Autoprefixer;</li> <li>支持 React, Vue 打包;</li> <li>支持实时刷新, React 和 Vue 可以热刷新;</li> <li>支持自动生成雪碧图;</li> <li>支持自动转换 px 到 rem;</li> <li>支持 SourceMap，方便调试;</li> <li>可以自定义 Webpack, Postcss 配置。</li> </ol> <h2>安装</h2> <pre>npm i -g ada</pre> <h2>使用帮助</h2> <ol> <li>运行<code>ada</code>，启动开发服务器，默认端口 8080；</li> <li>运行<code>ada build</code>，构建生产环境包，默认目录 dist；</li> <li>src/icons 目录里边的 png 图片会自动生成雪碧图，scss 代码中只需引入自动生成的 sprites/sprites.scss 文件，然后使用 <code>@include sprite($logo);</code> 既可以使用雪碧图，<code>docs/src/scss/test.scss</code>可做参考；</li> <li>运行<code>ada help</code>，查看各参数功能。</li> </ol> <pre> 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 显示版本号 [布尔] </pre> <h2>示例代码</h2> <p>查看源代码 docs 目录，里边内容使用 ada 构建。</p> <h2>文件目录</h2> <blockquote><p>src 目录为源代码目录，可以自定义。</p></blockquote> <pre> . ├── 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 </pre> <h2>功能测试</h2> <ul> <li><a class="test" href="./test.html">测试页面</a></li> </ul> </div> </main> </div> <footer> <div class="main-wrap"> <a href="https://ada.js.org">Copyright https://ada.js.org</a> </div> </footer> <script src="/dist/js/index.js"></script> </body> </html>