Rollup.js 前端模块打包学习

[jackieli123723]

Rollup.js 前端模块打包学习

本文用给一个登录的login.js来实例演示format不同格式

> Rollup其实和Webpack一样也是一个对模块构建的工具，功能相对简单，也意味着配置要简单很多，专注做一件事情，总比Webpack能处理“万物”要简化很多，最大的优势在于Tree-shaking，你可以大声呼喊：冗余代码请走开。
>* amd – Asynchronous Module Definition, used with module loaders like RequireJS 
>* cjs – CommonJS, suitable for Node and Browserify/Webpack
>* es – Keep the bundle as an ES module file
>* iife – A self-executing function, suitable for inclusion as a <script> tag. (If you want to create a bundle for your application, you probably want to use this, because it leads to smaller file sizes.)
>* umd – Universal Module Definition, works as amd, cjs and iife all in onevent
>* （注）以上摘自官网

先说结论iife和uglify配合使用

//该段可以在项目资金on个直接引用（可自行合并多个js到一个common.js）
!function(){"use strict";$(function(){function i(){e=$(window).width(),o=$(window).height(),$(".login_img_bg").width(e),$(".login_img_bg").height(o)}function t(i,n){var e=$("#msg_dis_container");n=n||1e3,0==e.length&&($(document.body).append('<div class="motify" style="display:none" id="msg_dis_container"><div class="motify-inner" id="msg_dis_content"></div></div>'),e=$("#msg_dis_container")),$("#msg_dis_content").html(i),e.css("display","block"),clearTimeout(t.timer),t.timer=setTimeout(function(){e.css("display","none")},n)}function n(i){0==s?(i.removeAttribute("disabled"),i.value="发送验证码",s=60):(i.setAttribute("disabled",!0),i.value=s+"秒后重发",s--,setTimeout(function(){n(i)},1e3))}var e=$(window).width(),o=$(window).height();$(".login_img_bg").width(e),$(".login_img_bg").height(o),$(window).resize(function(){i()}),t.timer=null;var d=!1,s=60;$("#send_pwd").attr("disabled",!1),$(".code").click(function(){n($(this).get(0))}),$("#btn-submit").on("click",function(){return $("#user").val().length<1?void t("登录邮箱不能为空"):$("#pwd").val().length<1?void t("登录密码不能为空"):$("#code").val().length<1?void t("验证码不能为空"):d?void t("正在登录，请稍等……"):void(d=!0)})})}();

$ npm run test

> rollup -c  --watch --config rollup/rollup.config.test.js

bundling...
bundled in 57ms. Watching for changes...

//package.json
{

  "scripts": {
    "test": "rollup -c  --watch --config rollup/rollup.config.test.js"
  },
  "author": "西门互联",
  "license": "MIT",
  "devDependencies": {
    "buble": "^0.14.2",
    "eslint": "^3.15.0",
    "mocha": "^3.2.0",
    "rollup": "^0.36.4",
    "rollup-plugin-buble": "^0.14.0",
    "rollup-plugin-commonjs": "^5.0.5",
    "rollup-plugin-livereload": "^0.4.0",
    "rollup-plugin-node-resolve": "^2.0.0",
    "rollup-plugin-scss": "^0.1.0",
    "rollup-plugin-serve": "^0.1.0",
    "rollup-plugin-uglify": "^1.0.1",
    "rollup-watch": "^3.2.2"
  },
  "dependencies": {
  }
}

//rollup.config.test.js

import serve from 'rollup-plugin-serve'
import livereload from 'rollup-plugin-livereload'
import buble from 'rollup-plugin-buble'
import resolve from 'rollup-plugin-node-resolve'
import commonjs from 'rollup-plugin-commonjs'
import uglify from 'rollup-plugin-uglify'

//iife-添加server和livereload
export default {
  entry: 'adminLogin-rollup-test/js/login.js',
  dest: 'adminLogin-rollup-test/js/login-livereload.js',
  format: 'iife',
  moduleName: 'login',
  plugins: [
    buble(),
    resolve({browser: true, main: true}),
    commonjs(),
     // uglify(),
     // 添加server和livereload
     serve({
      contentBase: 'adminLogin-rollup-test',
      historyApiFallback: true,
      host: 'localhost',
      port: 3001
    }),
    livereload()
  ]
}

//iife（推荐）(可以参考webpack配置环境变量来设置不同开发环境hot加载和刷新，合并压缩等等)
//iife
export default {
  entry: 'docs/login.js',
  dest: 'docs/login-iife-uglify.js',
  format: 'iife',
  moduleName: 'login',
  plugins: [
    buble(),
    resolve({browser: true, main: true}),
    commonjs(),
     uglify()
  ]
}

//login-iife-uglify.js(格式)

(function () {
'use strict';

//这里是你的逻辑代码
//有更快的执行速度在浏览器中

}());

//amd
export default {
  entry: 'docs/login.js',
  dest: 'docs/login-amd.js',
  format: 'amd',
  moduleName: 'login',
  plugins: [
    buble(),
    resolve({browser: true, main: true}),
    commonjs(),
    // uglify()
  ]
}

//login-iife-amd.js(格式)

define(function () { 
'use strict';

//这里是你的逻辑代码

});

//cjs
export default {
  entry: 'docs/login.js',
  dest: 'docs/login-cjs.js',
  format: 'cjs',
  moduleName: 'login',
  plugins: [
    buble(),
    resolve({browser: true, main: true}),
    commonjs(),
    // uglify()
  ]
}

//login-iife-cjs.js(格式)

'use strict';
//这里是你的逻辑代码
//这是添加了严格模式在头部

//es
export default {
  entry: 'docs/login.js',
  dest: 'docs/login-es.js',
  format: 'es',
  moduleName: 'login',
  plugins: [
    buble(),
    resolve({browser: true, main: true}),
    commonjs(),
    // uglify()
  ]
}

//login-iife-es.js(格式)

//和你的原来写的逻辑代码一模一样

//umd
export default {
  entry: 'docs/login.js',
  dest: 'docs/login-umd.js',
  format: 'umd',
  moduleName: 'login',
  plugins: [
    buble(),
    resolve({browser: true, main: true}),
    commonjs(),
    // uglify()
  ]
}

//login-iife-umd.js(格式)

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory() :
  typeof define === 'function' && define.amd ? define(factory) :
  (factory());
}(this, (function () { 
'use strict';
//和你的原来写的逻辑代码一模一样

})));

错误点：

• Rollup.js 中可以 catch 下 error 方便调试错误
• UMD/IIFE 模式中需要moduleName
• Rollup 的模块引用只支持 ES6 Module，其他的需要采用 npm 和 commonjs 的插件去解决

[jackieli123723]

Rollup其实和Webpack一样也是一个对模块构建的工具，功能相对简单，也意味着配置要简单很多，专注做一件事情，总比Webpack能处理“万物”要简化很多，最大的优势在于Tree-shaking，你可以大声呼喊：冗余代码请走开。

• amd – Asynchronous Module Definition, used with module loaders like RequireJS
• cjs – CommonJS, suitable for Node and Browserify/Webpack
• es – Keep the bundle as an ES module file
• iife – A self-executing function, suitable for inclusion as a Githubissues.
• Githubissues is a development platform for aggregating issues.