nono

Pymaster

jquery-css-mahoro: 新嘗試的集合

這篇文章並不是特別用來介紹 jquery-css-mahoro，主要在這次的開源過程中，我嘗試加入了一些之前沒有使用過的工具/流程。

本文將會概述一下這次 jquery-css-mahoro 中的新嘗試有哪些，而日後可能會有一些文章稍微深入介紹本次的新嘗試(也可能沒有，我就是懶)，請大家拭目以待。

jquery-css-mahoro

不過還是要先來簡介一下這次的開源小物。

jquery-css-mahoro https://github.com/pc035860/jquery-css-mahoro

是我覺得每次操作 CSS animation 的 class 都很麻煩，進而寫出的小小 jQuery plugin (真心覺得 ngAnimate 超方便)。

它能做的事情就 如 README 裡面所寫：

  1. 加上 CSS animation class
  2. CSS animation 開始跑
  3. 移除 CSS animation class

本來我只是把它丟在 某個 gist 裡面，後來發覺這樣要使用還是不太方便，還是需要丟上 NPM；既然要丟上 NPM，不如就找時間來認真的開源一下。

關於命名

現在與 CSS animation 有關的 jQuery plugin 實在太多，大家的名字也都差不多沒什麼識別度，既然這樣我還不如選一個特立獨行一點的，好好地做 SEO 應該還還是會有可見度的啦(吧)。

至於為什麼叫 Mahoro，我想我高中的朋友們比較清楚 w

Write with ES2015

Mahoro 是用 ES2015 語法寫的。

其實整個 repo 裡唯一不是 ES2015 的 .js 檔只有 test/karma.conf.js。

Rollup as bundler

rollup.js http://rollupjs.org/

Rollup 是未來版的 module bundler，跟 browserify 或 webpack 最大的差異是它預設只認 ES2015 的 module。它最強力的特色就是在全部使用 ES2015 module 來做 bundle 的前提下，有透過 “tree-shaking” 來讓 bundle 結果較為精簡的效果(webpack 2 也會支援此功能)。

其實這次的 jquery-css-mahoro 壓根小到不太需要 bundler，但我還是硬掛上去 XD

需要注意的是 它真的只做好它份內的工作，所以你需要加掛 plugin 來達到接近 webpack 的功能：

感想：Rollup 還沒有 incremental build，老實說每次都重新 build 有點慢，不過 tree-shaking 真的蠻酷的

/* file: rollup.config.js */

import babel from 'rollup-plugin-babel';
import nodeResolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';

export default {
  entry: 'lib/index.js',
  plugins: [
    babel(),
    nodeResolve({
      jsnext: true,
      main: true,
      browser: true
    }),
    commonjs()
  ],
  dest: 'dist/jquery.css-mahoro.js'
};

Build with NPM scripts

我平常的起手 task runner 都是 gulp，在經歷 一些文章洗腦 之後，這次嘗試純用 npm run xxx 來解決所有 task。

另外裝的輔助工具：

  • onchange — 支援 glob pattern 的監看並執行工具
  • argv-set-env — 跨平台設定 environment varaibles (我在家會使用 Windows 開發)

這次 package.json 裡面的 scripts：

{
  "test": "karma start test/karma.conf.js",
  "autotest": "karma start test/karma.conf.js --auto-watch --no-single-run",
  "watch": "onchange src/{**/,}*.js -v -- npm run build",
  "lint": "eslint src/{**/,}*.js",
  "build": "rollup -c --set-env-NODE_ENV=production && uglifyjs dist/jquery.css-mahoro.js -o dist/jquery.css-mahoro.min.js -c -m",
  "prepublish": "npm run lint && npm run build && npm run test"
}

感想：要跑的 task 簡單的話，還不錯用。如果複雜到需要另外寫給 node 跑的 script 的話，我想我還是會用 gulp。

No Bower package

如果是平常的我發前端 package，Bower 應該才是我的第一優先，這次特別嘗試如果只發 NPM package 會如何。

有興趣可以看一下相關的「去 Bower 文章」

這只是一次小小嘗試，我對 Bower 還是抱著支持的態度。

有缺點，改進就好了，整包丟掉不能解決問題。另外換個角度看，在 HTTP/2 日漸普及的時候繼續推 bundler 好像不全然是正確的方向？

歡迎到 Bountysource 上支持 Bower https://salt.bountysource.com/teams/bower

Write tests for jQuery plugin

其實我真的沒有寫 test 的習慣(掩面)；除了少寫之外，以前也沒有寫過 jQuery plugin 的 test。

這次是吃了秤砣鐵了心才硬是寫了一發 test，老實說最麻煩的部分其實可能是 setup 適合你/這個 project 的 test 環境/流程。

有在關注我早期文章的人應該有印象，我之前其實寫過 AngularJS 相關的 test 文章，之前基本上是使用 Jasmine。這次的 test 組合也是新的 — mocha + Chai。

Runner 的部分還是採用老朋友 Karma (之前的文章有介紹)，不過這次發現這位老朋友也是變強了很多(?)。這次在 Karma 上加掛了兩個 preprocessor，來協助整個 test 的順暢度：

感想：最後加上 karma-mocha-reporter 之後看起來好精美啊… (另外也推薦 karma-nyan-reporter)

/* file: test/karma.conf.js */

module.exports = function (config) {
  config.set({
    frameworks: ['mocha', 'chai'],

    reporters: ['mocha'],
    mochaReporter: {
      output: 'autowatch'
    },

    basePath: '../',
    files: [
      'node_modules/jquery/dist/jquery.min.js',
      'dist/jquery.css-mahoro.min.js',
      'test/template.html',
      'test/test.js'
    ],

    preprocessors: {
      'test/*.html': ['html2js'],
      'test/*.js': ['babel']
    },
    babelPreprocessor: {
      options: {
        presets: ['es2015']
      }
    },

    browsers: ['PhantomJS'],
    autoWatch: false,
    singleRun: true,
    colors: true
  });
};

後記

這次真的是投入超大量時間在 查/組合 各種設定，為了好好讓 Mahoro 開源真的是煞費苦心，不過也從中學到了不少新東西。

如果覺得 Mahoro 不錯用的話，幫我到 Github 上給個 star 吧！

jquery-css-mahoro https://github.com/pc035860/jquery-css-mahoro

  • jquery
  • jquery-css-mahoro