Rollup.js 實踐

音樂分享：

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

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

項目截圖：

 

項目目錄：

目錄介紹：

 1 |---dist ------------------------最後文件目錄
 2 |----└──i------------------------圖片目錄
 3 |----└──j------------------------最後Rollup.js的生成的js目錄
 4 |----└──index.html---------------html文件
 5 |---node_modules-----------------node依賴目錄
 6 |---package.json-----------------包描述文件及開發者信息
 7 |---rollup.config.js-—-----------Rollup.js的配置文件
 8 |---src--------------------------開發文件
 9 |----└──s------------------------sass目錄
10 |----└──j------------------------開發js目錄

 

流程步驟:

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

npm init -y

栗子截圖:

 

二、在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

 1 npm install babel-preset-es2015-rollup
 2             babel-preset-stage-0
 3             node-sass
 4             rollup
 5             rollup-plugin-babel
 6             rollup-plugin-commonjs
 7             rollup-plugin-livereload
 8             rollup-plugin-sass
 9             rollup-plugin-serve
10             rollup-plugin-uglify
11             rollup-watch
12             livereload      ---save-dev

栗子截圖：

生成的package.json文件：

 1 {
 2   "name": "rollup-demo",
 3   "version": "1.0.0",
 4   "description": "",
 5   "main": "rollup.config.js",
 6   "scripts": {
 7     "dev": "rollup -c --watch",
 8     "test": "echo \"Error: no test specified\" && exit 1"
 9   },
10   "keywords": [],
11   "author": "",
12   "license": "ISC",
13   "dependencies": {
14     "babel-preset-es2015-rollup": "^3.0.0",
15     "babel-preset-stage-0": "^6.22.0",
16     "node-sass": "^4.5.0",
17     "rollup": "^0.41.4",
18     "rollup-plugin-babel": "^2.7.1",
19     "rollup-plugin-commonjs": "^7.0.0",
20     "rollup-plugin-livereload": "^0.4.0",
21     "rollup-plugin-sass": "^0.4.9",
22     "rollup-plugin-serve": "^0.1.0",
23     "rollup-plugin-uglify": "^1.0.1",
24     "rollup-watch": "^3.2.2"
25   },
26   "devDependencies": {
27     "livereload": "^0.6.0"
28   }
29 }

 

 三、在根目錄建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/'     //監聽文件夾;
    })
  ]
  
};

 

四、在index.js 入口js文件 引入須要打包文件：

 1 'use strict';
 2 
 3 //啓動server;
 4 document.write('<script src="http://' 
 5                 + (location.host || 'localhost').split(':')[0] +
 6                 ':5729/livereload.js?snipver=1"></' + 'script>');
 7 
 8 import "../s/index.scss"; //sass文件;
 9 import $ from "./jquery.min.js"; //js文件;
10 import * as sos from "./c.js"; //js文件;
11 
12 $(function(){
13     sos.sos('test'); //調用c.js的方法;

栗子截圖：

 

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

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

 栗子截圖：

 

六、在index.html 引入最後的css/js：

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

 栗子截圖：

 

七、以上完成以後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 入門》