Rollup.js 實踐

音樂分享：

 B.o.B Ft. Marko Penn - 《Roll up》

——————————————————————————————————————————————————————————————

項目截圖：

 

項目目錄：

目錄介紹：

|---dist ------------------------最后文件目錄
|----└──i------------------------圖片目錄
|----└──j------------------------最后Rollup.js的生成的js目錄
|----└──index.html---------------html文件
|---node_modules-----------------node依賴目錄
|---package.json-----------------包描述文件及開發者信息
|---rollup.config.js-—-----------Rollup.js的配置文件
|---src--------------------------開發文件
|----└──s------------------------sass目錄
|----└──j------------------------開發js目錄

 

流程步驟:

1、在CMD進入你所要打包文件根目錄，在CMD里輸入:

npm init -y

栗子截圖:

 

2、在CMD輸入安裝Rollup.js插件

插件介紹：

rollup(本尊)：rollup

babel (ES6轉ES5) : rollup-plugin-babel、babel-preset-es2015-rollup、babel-preset-stage-0

commonjs(common的js模塊)：rollup-plugin-commonjs

sass(css預編譯):rollup-plugin-sass、node-sass

js壓縮:rollup-plugin-uglify

sever(本地服務器):rollup-plugin-serve

熱更新(改代碼不手動刷新瀏覽器)：livereload、rollup-plugin-livereload

實時監聽(監聽文件更改)：rollup-watch

npm install babel-preset-es2015-rollup
            babel-preset-stage-0
            node-sass
            rollup
            rollup-plugin-babel
            rollup-plugin-commonjs
            rollup-plugin-livereload
            rollup-plugin-sass
            rollup-plugin-serve
            rollup-plugin-uglify
            rollup-watch
            livereload      ---save-dev

栗子截圖：

生成的package.json文件：

{
  "name": "rollup-demo",
  "version": "1.0.0",
  "description": "",
  "main": "rollup.config.js",
  "scripts": {
    "dev": "rollup -c --watch",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-preset-es2015-rollup": "^3.0.0",
    "babel-preset-stage-0": "^6.22.0",
    "node-sass": "^4.5.0",
    "rollup": "^0.41.4",
    "rollup-plugin-babel": "^2.7.1",
    "rollup-plugin-commonjs": "^7.0.0",
    "rollup-plugin-livereload": "^0.4.0",
    "rollup-plugin-sass": "^0.4.9",
    "rollup-plugin-serve": "^0.1.0",
    "rollup-plugin-uglify": "^1.0.1",
    "rollup-watch": "^3.2.2"
  },
  "devDependencies": {
    "livereload": "^0.6.0"
  }
}

 

 3、在根目錄建rollup.config.js文件並編寫:

'use strict';
	
import babel from 'rollup-plugin-babel';	      //ES6轉ES5插件;
import sass from 'rollup-plugin-sass';            //sass插件;
import commonjs from "rollup-plugin-commonjs";    //將CommonJS模塊轉換成ES6，防止他們在Rollup中失效;
import uglify from 'rollup-plugin-uglify';        //js壓縮;
import serve from 'rollup-plugin-serve';          //serve服務;
import livereload from 'rollup-plugin-livereload';//熱更新;

export default {
  entry: 'src/j/index.js',   // 入口文件;
  format: 'iife',			 // 打包輸入格式分別為:amd,cjs,es,iife,umd;(https://github.com/rollup/rollup/wiki/JavaScript-API#format); 
  dest: 'dist/j/bundle.js',  // 輸出文件;
  sourceMap: 'inline',		 // 調試sourceMap;
  plugins: [ 
    commonjs(),           //將CommonJS模塊轉換成ES6;
    sass({
    	output: './dist/c/bundle.css'  //設置sass編譯完成路徑;
    }),
    babel({
          babelrc: false,                        //不設置.babelrc文件;
          exclude: 'node_modules/**',            //排除node_modules文件夾;
          presets: ['es2015-rollup', 'stage-0'], //轉ES5的插件;
          plugins: ['transform-class-properties']//轉換靜態類屬性以及屬性聲明的屬性初始化語法
    }),
    uglify(),                        //js壓縮;
  	serve({
  	 contentBase: 'dist/',   //啟動文件夾;
  	  host: 'localhost',      //設置服務器;
  	  port: 10001			  //端口號;
  	}),  
    livereload({
      watch: 'dist/'     //監聽文件夾;
    })
  ]
  
};

 

4、在index.js 入口js文件 引入需要打包文件：

'use strict';

//啟動server;
document.write('<script src="http://' 
                + (location.host || 'localhost').split(':')[0] +
                ':5729/livereload.js?snipver=1"></' + 'script>');

import "../s/index.scss"; //sass文件;
import $ from "./jquery.min.js"; //js文件;
import * as sos from "./c.js"; //js文件;

$(function(){
    sos.sos('test'); //調用c.js的方法;

栗子截圖：

 

5、在編寫rollup.config.js文件 npm script:

"dev": "rollup -c --watch",

 栗子截圖：

 

6、在index.html 引入最后的css/js：

<link rel="stylesheet" type="text/css" href="c/bundle.css">
<script type="text/javascript" src="j/bundle.js"></script>

 栗子截圖：

 

7、以上完成之后CMD輸入 npm run dev 啟動服務：

npm run dev

栗子截圖：

 

瀏覽器打http://localhost:10001/ 就能查看

 

后記：

其實我個人還挺喜歡Roullp.js的

配置簡單，打包js沒有啥多余代碼(沒錯 就說你呢 webpack)

還有獨立css文件也能實時熱更新

但是目前的插件還是太少了

 

參考資料:

rollup.js     :  官網

小爝　　     :  《使用rollup和npm scripts構建完整javascript項目》

Showonne  :  《[譯]教程：如何使用Rollup打包JavaScript》

Showonne  :  [譯]教程：如何使用Rollup打包樣式文件並添加LiveReload

見見           :  Rollup 試煉之路

VaJoy Larn :  《冗余代碼都走開——前端模塊打包利器 Rollup.js 入門》