深刻學習rollup來進行打包

深刻學習rollup來進行打包

閱讀目錄

• 一：什麼是Rollup?
• 二：如何使用Rollup來處理並打包JS文件？
• 三：設置Babel來使舊瀏覽器也支持ES6的代碼
• 四：添加一個debug包來記錄日誌
• 五：添加插件來替代環境變量
• 六：添加 UglifyJS來壓縮咱們js的代碼
• 七：監聽文件變化的插件 --- rollup-watch
• 八：開啓本地服務的插件 --- rollup-plugin-serve
• 九：實時刷新頁面 --- rollup-plugin-livereload
• 十. 安裝同時運行watcher 和 Livereload的工具
• 十一. rollup+PostCSS打包樣式文件並添加 LiveReload

回到頂部

一：什麼是Rollup?

  rollup是一款用來es6模塊打包代碼的構建工具(支持css和js打包)。當咱們使用ES6模塊編寫應用或者庫時，它能夠打包成一個單獨文件提供瀏覽器和Node.js來使用。
它的優勢有以下：
  1. 能組合咱們的腳本文件。
  2. 移除未使用的代碼(僅僅使用ES6語法中)。
  3. 在瀏覽器中支持使用 Node modules。
  4. 壓縮文件代碼使文件大小盡量最小化。

Rollup最主要的優勢是 它是基於ES2015模塊的，相比於webpack或Browserify所使用的CommonJS模塊更加有效率，由於Rollup使用一種叫作
tree-shaking的特性來移除模塊中未使用的代碼，這也就是說當咱們引用一個庫的時候，咱們只用到一個庫的某一段的代碼的時候，它不會把全部的代碼打包進來，而僅僅打包使用到的代碼(webpack2.0+貌似也引入了tree-shaking)。

注意：Rollup只會在ES6模塊中支持tree-shaking特性。目前按照CommonJS模塊編寫的jquery不能被支持tree-shaking.

rollup 的應用場景

如今目前流行的打包有 gulp 和 webpack，那麼與前面兩個對比，我以爲rollup更適合打包js庫，可是對於打包一個項目的整個應用的話，我到以爲webpack更適合，好比打包一些圖片，字體等資源文件的時候，webpack很適合，目前貌似沒有看到rollup能夠作到這些。
之因此我來研究rollup，是由於最近在看vuex的源碼的時候，看到它的js庫就是使用rollup來進行打包的。

回到頂部

二：如何使用Rollup來處理並打包JS文件？

2-1 安裝Rollup並建立配置文件，經過以下命令安裝：
      進入項目根目錄後，運行命令： npm install --save-dev rollup

2-2 在項目的根目錄下新建一個新文件 rollup.config.js, 以後再在文件中添加以下代碼：

export default {
  input: './src/main.js',
  output: {
    file: './dist/js/main.min.js',
    format: 'iife'
  }
}

下面再來了解一下各個配置的含義：
input： rollup先執行的入口文件。
output：rollup 輸出的文件。
output.format: rollup支持的多種輸出格式(有amd,cjs, es, iife 和 umd, 具體看 http://www.cnblogs.com/tugenhua0707/p/8150915.html)
sourceMap —— 若是有 sourcemap 的話，那麼在調試代碼時會提供很大的幫助，這個選項會在生成文件中添加 sourcemap，來讓事情變得更加簡單。

咱們在package.json代碼下 添加以下腳本。

"scripts": {
  "build": "rollup -c"
}

所以咱們只要在命令行中 輸入命令：npm run build 便可完成打包；

咱們再看下各個文件下的代碼：

src/js/a.js 代碼以下：

export function a(name) {
  const temp = `Hello, ${name}!`;
  return temp;
}
export function b(name) {
  const temp = `Later, ${name}!`;
  return temp;
}

src/js/b.js代碼以下：

/**
 * Adds all the values in an array.
 * @param  {Array} arr an array of numbers
 * @return {Number}    the sum of all the array values
 */
const addArray = arr => {
  const result = arr.reduce((a, b) => a + b, 0);
  return result;
};
export default addArray;

src/main.js代碼以下：

import { a } from './js/a';
import addArray from './js/b';

const res1 = a('kongzhi');
const res2 = addArray([1, 2, 3, 4]);

console.log(res1);
console.log(res2);

最終會在項目的根目錄下生成文件 dist/js/main.min.js, 代碼以下：

(function () {
'use strict';

function a(name) {
  const temp = `Hello, ${name}!`;
  return temp;
}

/**
 * Adds all the values in an array.
 * @param  {Array} arr an array of numbers
 * @return {Number}    the sum of all the array values
 */
const addArray = arr => {
  const result = arr.reduce((a, b) => a + b, 0);
  return result;
};

const res1 = a('kongzhi');
const res2 = addArray([1, 2, 3, 4]);

console.log(res1);
console.log(res2);

}());

如上能夠看到 在 src/js/a.js 下的 b函數沒有被使用到，因此打包的時候沒有被打包進來。

注意：在上面代碼打包後，只有現代瀏覽器會正常工做，若是要讓不支持ES2015的舊版本瀏覽器下也正常工做的話，咱們須要添加一些插件。

回到頂部

三：設置Babel來使舊瀏覽器也支持ES6的代碼

如上打包後的代碼，咱們能夠在現代瀏覽器下運行了，可是若是咱們使用老版本的瀏覽器的話，就會產生錯誤。幸運的是，Babel已經提供了支持。
咱們首先須要安裝一些依賴項以下命令：

npm install --save-dev 
babel-core babel-preset-env babel-plugin-external-helpers 
babel-plugin-transform-runtime babel-preset-stage-2 
babel-register rollup-plugin-babel

注意：Babel preset 是一個有關Babel插件的集合，它會告訴Babel咱們須要轉譯什麼。

3.2 建立 .babelrc文件

接下來須要在項目的根目錄下建立 .babelrc的新文件了，它內部添加以下JSON代碼：

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-runtime", "external-helpers"]  // 配置runtime，不設置會報錯
}

它會告訴Babel應該使用哪一種preset來轉譯代碼。

所以咱們再更新下 rollup.config.js，咱們須要Babel插件，將它添加到一個新的配置選項plugins中，他會管控一個數組形式的插件列表，代碼以下：

// Rollup plugins
import babel from 'rollup-plugin-babel';

export default {
  input: './src/main.js',
  output: {
    file: './dist/js/main.min.js',
    format: 'iife'
  },
  plugins: [
    babel({
      exclude: 'node_modules/**'  // 排除node_module下的全部文件
    })
  ]
}

爲了不轉譯第三方腳本，咱們須要設置一個 exclude 的配置選項來忽略掉 node_modules 目錄下的全部文件。安裝完成後，咱們從新運行命令；而後打包後代碼變成以下：

(function () {
'use strict';

function a(name) {
  var temp = "Hello, " + name + "!";
  return temp;
}

/**
 * Adds all the values in an array.
 * @param  {Array} arr an array of numbers
 * @return {Number}    the sum of all the array values
 */
var addArray = function addArray(arr) {
  var result = arr.reduce(function (a, b) {
    return a + b;
  }, 0);
  return result;
};

var res1 = a('kongzhi');
var res2 = addArray([1, 2, 3, 4]);

console.log(res1);
console.log(res2);

}());

咱們對比下代碼，能夠看到 addArray 的箭頭函數解析成真正的函數了。 在轉譯運行完成後，代碼也差很少同樣的，只是代碼已經支持
了IE9以前的瀏覽器了。

注意： Babel也提供了 babel-polyfill， 也可讓IE8以前的瀏覽器可以順利執行。

回到頂部

四：添加一個debug包來記錄日誌

 爲了查看日誌，咱們將在代碼中添加一個debug包來記錄下日誌信息。經過以下命令安裝：

npm install --save debug

而後咱們能夠在 src/main.js中，添加一些簡單的日誌記錄：以下代碼：

import { a } from './js/a';
import addArray from './js/b';
import debug from 'debug';
const log = debug('app:log');

// Enable the logger.
debug.enable('*');
log('Logging is enabled!');

const res1 = a('kongzhi');
const res2 = addArray([1, 2, 3, 4]);

// Print the results on the page.
const printTarget = document.getElementsByClassName('debug__output')[0];

printTarget.innerText = `sayHelloTo('Jason') => ${res1}\n\n`;
printTarget.innerText += `addArray([1, 2, 3, 4]) => ${res2}`;

index.html 代碼變成以下：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport"
        content="width=device-width,minimum-scale=1,initial-scale=1">
  <title>Learning Rollup</title>
</head>
<body>

  <h1>Learning Rollup</h1>
  <p>
    Let’s learn how to use <a href="http://rollupjs.org/">Rollup</a>.
  </p>

  <!-- JS-generated output will be added here. -->
  <pre class="debug"><code class="debug__output"></code></pre>

  <!-- This is the bundle generated by rollup.js -->
  <script src="./dist/js/main.min.js"></script>

</body>
</html>

而後咱們直接訪問index.html後，瀏覽器控制檯報錯了，錯誤信息以下：
Uncaught ReferenceError: debug is not defined，而後咱們能夠繼續查看，打包後的main.min.js的代碼變爲以下：

(function (debug) {
'use strict';

debug = debug && debug.hasOwnProperty('default') ? debug['default'] : debug;

function a(name) {
  var temp = "Hello, " + name + "!";
  return temp;
}

/**
 * Adds all the values in an array.
 * @param  {Array} arr an array of numbers
 * @return {Number}    the sum of all the array values
 */
var addArray = function addArray(arr) {
  var result = arr.reduce(function (a, b) {
    return a + b;
  }, 0);
  return result;
};

var log = debug('app:log');

// Enable the logger.
debug.enable('*');
log('Logging is enabled!');

var res1 = a('kongzhi');
var res2 = addArray([1, 2, 3, 4]);

// Print the results on the page.
var printTarget = document.getElementsByClassName('debug__output')[0];

printTarget.innerText = 'sayHelloTo(\'Jason\') => ' + res1 + '\n\n';
printTarget.innerText += 'addArray([1, 2, 3, 4]) => ' + res2;

}(debug));

也就是說 瀏覽器報錯是由於打包後的debug是 undefined，這是由於通常的狀況下，第三方node模塊並不會被Rollup正確加載。
Node模塊使用的是CommonJS, 它不會被Rollup兼容所以不能直接被使用，爲了解決這個問題，咱們須要添加一些插件來
處理Node依賴和CommonJS模塊。
爲了解決上面的兩個問題，咱們須要在Rollup中添加以下兩個插件：
1. rollup-plugin-node-resolve 該插件會容許加載在 node_modules中的第三方模塊。
2. rollup-plugin-commonjs 它會將CommonJS模塊轉換爲ES6來爲Rollup得到兼容。

所以以下命令便可安裝：

npm install --save-dev rollup-plugin-node-resolve rollup-plugin-commonjs

而後咱們繼續更新下 rollup.config.js 代碼以下：

// Rollup plugins
import babel from 'rollup-plugin-babel';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import json from 'rollup-plugin-json';

export default {
  input: './src/main.js',
  output: {
    file: './dist/js/main.min.js',
    format: 'iife'
  },
  plugins: [
    resolve({
      jsnext: true,  // 該屬性是指定將Node包轉換爲ES2015模塊
      // main 和 browser 屬性將使插件決定將那些文件應用到bundle中
      main: true,  // Default: true 
      browser: true // Default: false
    }),
    commonjs(),
    json(),
    babel({
      exclude: 'node_modules/**'  // 排除node_modules 下的文件
    })
  ]
}

到目前爲止一切順利，可是當咱們運行index.html時候， rollup 時咱們會獲得一個日誌信息：

在控制檯以下日誌信息：
app:log Logging is enabled! +0ms

index.html 頁面上顯示以下：

Learning Rollup
Let’s learn how to use Rollup.

sayHelloTo('Jason') => Hello, kongzhi!

addArray([1, 2, 3, 4]) => 10

如上代碼，咱們看到引入了 rollup-plugin-json 插件了，該插件的做用是讀取json信息的，好比我讀取package.json的信息:

而後我把main.js中引入對應代碼。代碼以下：

import { a } from './js/a';
import addArray from './js/b';
import debug from 'debug';

// 添加json
import pkg from '../package.json';
console.log( `running version ${pkg.version}` ); // 控制檯輸出 running version 1.0.0

const log = debug('app:log');

// Enable the logger.
debug.enable('*');
log('Logging is enabled!');

const res1 = a('kongzhi');
const res2 = addArray([1, 2, 3, 4]);

// Print the results on the page.
const printTarget = document.getElementsByClassName('debug__output')[0];

printTarget.innerText = `sayHelloTo('Jason') => ${res1}\n\n`;
printTarget.innerText += `addArray([1, 2, 3, 4]) => ${res2}`;

在控制檯輸出以下信息：
控制檯輸出 running version 1.0.0

回到頂部

五：添加插件來替代環境變量

 環境變量能爲咱們的開發流程提供很大的幫助，咱們能夠經過它來執行關閉或開啓日誌，注入開發環境腳本等功能。
所以咱們能夠在main.js中添加基礎配置的ENV。讓咱們添加一個環境變量來使咱們的日誌腳本只在非 production環境下才會執行
。以下main.js代碼：

import { a } from './js/a';
import addArray from './js/b';
import debug from 'debug';

// 添加json
import pkg from '../package.json';
console.log( `running version ${pkg.version}` ); // 控制檯輸出 running version 1.0.0

const log = debug('app:log');

// 若是是正式環境的話，不輸出日誌信息
if (ENV !== 'production') {
  // Enable the logger.
  debug.enable('*');
  log('Logging is enabled!');
} else {
  debug.disable();
}

const res1 = a('kongzhi');
const res2 = addArray([1, 2, 3, 4]);

// Print the results on the page.
const printTarget = document.getElementsByClassName('debug__output')[0];

printTarget.innerText = `sayHelloTo('Jason') => ${res1}\n\n`;
printTarget.innerText += `addArray([1, 2, 3, 4]) => ${res2}`;

而後打包完成後，在瀏覽器查看 發現報錯了，以下錯誤信息：
Uncaught ReferenceError: ENV is not defined
這也很正常，由於咱們並無定義它，如今咱們還須要一個插件來將咱們的環境變量用到bundle中。

5-1 先安裝 rollup-plugin-replcae，該插件是一個用來查找和替換的工做，咱們只須要找到目前的環境變量而且使用實際
的值替代就能夠了。先安裝以下：
npm install --save-dev rollup-plugin-replace

而後咱們再來更新一下 rollup.config.js, 配置是咱們能夠添加一個 key:value 的配對錶，key值是準備被替換的鍵，而value是將要被替換的值。

// Rollup plugins
import babel from 'rollup-plugin-babel';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import json from 'rollup-plugin-json';
import replace from 'rollup-plugin-replace';

export default {
  input: './src/main.js',
  output: {
    file: './dist/js/main.min.js',
    format: 'iife'
  },
  plugins: [
    resolve({
      jsnext: true,  // 該屬性是指定將Node包轉換爲ES2015模塊
      // main 和 browser 屬性將使插件決定將那些文件應用到bundle中
      main: true,  // Default: true 
      browser: true // Default: false
    }),
    commonjs(),
    json(),
    babel({
      exclude: 'node_modules/**'  // 排除node_modules 下的文件
    }),
    replace({
      ENV: JSON.stringify(process.env.NODE_ENV || 'development')
    })
  ]
}

當咱們如今運行 npm run build 的時候仍是有日誌信息的，由於默認的環境就是 development， 可是當咱們在命令
行中使用以下命令：`NODE_ENV=production ./node_modules/.bin/rollup -c`(mac系統下的命令)， 而後打包
後，刷新瀏覽器 就不會有日誌記錄信息了。
注意：在winodw環境下，運行以下命令： SET NODE_ENV=production ./node_modules/.bin/rollup -c

回到頂部

六：添加 UglifyJS來壓縮咱們js的代碼

 安裝插件 rollup-plugin-uglify

命令以下安裝：
npm install --save-dev rollup-plugin-uglify

再在 rollup.config.js 配置代碼，爲了在開發中使代碼更具可讀性，咱們只在生產環境壓縮代碼：
rollup.config.js配置代碼以下：

// Rollup plugins
import babel from 'rollup-plugin-babel';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import json from 'rollup-plugin-json';
import replace from 'rollup-plugin-replace';
import uglify from 'rollup-plugin-uglify';

export default {
  input: './src/main.js',
  output: {
    file: './dist/js/main.min.js',
    format: 'iife'
  },
  plugins: [
    resolve({
      jsnext: true,  // 該屬性是指定將Node包轉換爲ES2015模塊
      // main 和 browser 屬性將使插件決定將那些文件應用到bundle中
      main: true,  // Default: true 
      browser: true // Default: false
    }),
    commonjs(),
    json(),
    babel({
      exclude: 'node_modules/**'  // 排除node_modules 下的文件
    }),
    replace({
      ENV: JSON.stringify(process.env.NODE_ENV || 'development')
    }),
    (process.env.NODE_ENV === 'production' && uglify())
  ]
}

當咱們在mac系統下運行命令 `NODE_ENV=production ./node_modules/.bin/rollup -c` 後，代碼被壓縮了，當咱們運行
npm run build 的時候，代碼未被壓縮。

回到頂部

七：監聽文件變化的插件 --- rollup-watch

以下安裝命令：
npm install --save-dev rollup-watch

而後在package.json 中設置 scripts屬性便可：

"scripts": {
  "dev": "rollup -c -w",
  "build": "rollup -c"
}

當咱們在 src/main.js 代碼下 加入一句代碼後 ： console.log(1122); 而後在瀏覽器下刷新下便可在控制檯能夠看到打印輸出 1122這樣的就能夠監聽到了。不須要從新打包便可。

回到頂部

八：開啓本地服務的插件 --- rollup-plugin-serve

 安裝命令以下：

npm install --save-dev rollup-plugin-serve

在rollup.config.js 配置代碼以下：

// Rollup plugins
import babel from 'rollup-plugin-babel';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import json from 'rollup-plugin-json';
import replace from 'rollup-plugin-replace';
import uglify from 'rollup-plugin-uglify';
import serve from 'rollup-plugin-serve';
export default {
  input: './src/main.js',
  output: {
    file: './dist/js/main.min.js',
    format: 'iife'
  },
  plugins: [
    resolve({
      jsnext: true,  // 該屬性是指定將Node包轉換爲ES2015模塊
      // main 和 browser 屬性將使插件決定將那些文件應用到bundle中
      main: true,  // Default: true 
      browser: true // Default: false
    }),
    commonjs(),
    json(),
    babel({
      exclude: 'node_modules/**'  // 排除node_modules 下的文件
    }),
    replace({
      ENV: JSON.stringify(process.env.NODE_ENV || 'development')
    }),
    (process.env.NODE_ENV === 'production' && uglify()),
    serve({
      open: true, // 是否打開瀏覽器
      contentBase: './', // 入口html的文件位置
      historyApiFallback: true, // Set to true to return index.html instead of 404
      host: 'localhost',
      port: 10001
    })
  ]
}

而後重啓命令 npm run build 就能夠會自動打開 http://localhost:10001/ 頁面了。
注意： 這邊port配置的端口號是五位數，不是四位數。

回到頂部

九：實時刷新頁面 --- rollup-plugin-livereload

命令安裝以下：
npm install --save-dev rollup-plugin-livereload

注入LiveReload腳本
在LiveReload工做前，須要向頁面中注入一段腳本用於和LiveReload的服務器創建鏈接。
在src/main.js 中加入以下一段代碼：

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

src/main.js全部代碼以下：

import { a } from './js/a';
import addArray from './js/b';
import debug from 'debug';

// 添加json
import pkg from '../package.json';
console.log( `running version ${pkg.version}` ); // 控制檯輸出 running version 1.0.0

const log = debug('app:log');
// 若是不是正式環境的話，不輸出日誌信息
if (ENV !== 'production') {
  // Enable the logger.
  debug.enable('*');
  log('Logging is enabled!');
  // Enable LiveReload
  document.write(
    '<script src="http://' + (location.host || 'localhost').split(':')[0] +
    ':35729/livereload.js?snipver=1"></' + 'script>'
  );
} else {
  debug.disable();
}

const res1 = a('kongzhi');
const res2 = addArray([1, 2, 3, 4]);
console.log(1122)
// Print the results on the page.
const printTarget = document.getElementsByClassName('debug__output')[0];

printTarget.innerText = `sayHelloTo('Jason') => ${res1}\n\n`;
printTarget.innerText += `addArray([1, 2, 3, 4]) => ${res2}`;

運行 LiveReload
LiveReload安裝好而且腳本注入到文檔中後，咱們能夠運行它去監聽build目錄：
以下命令：
./node_modules/.bin/livereload 'build/'

運行完成後 發現報錯了 Error: listen EADDRINUSE :::35729；經過百度才發現端口被佔用了，須要換端口，所以我直接把這個進程殺掉不就能夠了，
首先咱們先使用以下命令來查看下進程：
lsof -n -i4TCP:35729
看到信息以下：

COMMAND  PID     USER   FD   TYPE             DEVICE SIZE/OFF NODE NAME
node    1452 tugenhua   15u  IPv6 0xb0e27d409cc55a1b      0t0  TCP *:35729 (LISTEN)

運行以下命令殺掉：

kill -9 1452
再在命令行輸入 ./node_modules/.bin/livereload 'src/' 便可看到以下：

$ ./node_modules/.bin/livereload 'src/'
Starting LiveReload v0.6.3 for /Users/tugenhua/我的demo/vue1204/rollup-build/src on port 35729.

注意：./node_modules/.bin/livereload 'src/' 這句代碼的含義是 監聽src文件夾的文件，所以index.html內會
監聽到，咱們能夠打開 src/index.html後，而後在index.html修改內容後，保存一下就能夠看到頁面會自動刷新內容了。

如上雖然改變 src/index.html的內容後會自動刷新頁面，可是感受每次 都須要輸入 ./node_modules/.bin/livereload 'src/' 這麼一段命令，有點麻煩，所以咱們能夠在 package.json 腳本中來簡化這個過程，在package.json下scripts加上以下代碼：

"scripts": {
  "dev": "rollup -c -w",
  "build": "rollup -c",
  "reload": "livereload 'src/'"
}, 

當咱們在命令行中 運行 npm run reload 也能夠監聽到了。可是咱們監聽不到 src/js 或 src/css 下的文件的變化，
由於它不會自動打包，而只是監聽src下的文件變化而已。可是咱們又不能同時打開 watcher 和 Livereload，會報錯端口被佔用的狀況。
所以咱們須要看第10條來解決這個問題哦；

回到頂部

十. 安裝同時運行watcher 和 Livereload的工具

 爲了能同時執行 Rollup和LiveReload, 咱們須要使用一個叫作 npm-run-all 的工具。它的含義是一個終端能夠執行多個任務。

安裝命令以下：
npm install --save-dev npm-run-all

而後咱們要在package.json中再加入一條調用npm-run-all的腳本。在scripts代碼塊內，添加以下內容:

"scripts": {
  "dev": "rollup -c -w",
  "build": "rollup -c",
  "reload": "livereload 'src/'",
  "watch": "npm-run-all --parallel dev"
},

watch 就是新增的。所以咱們能夠在終端運行 npm run watch命令了，而後刷新瀏覽器(http://localhost:10002/src/index.html)，改變一下js或者css，瀏覽器會自動加載更新後的代碼了。

回到頂部

十一. rollup+PostCSS打包樣式文件並添加 LiveReload

 1. 在main.js中加載樣式： 在main.js 中加入以下代碼：

// Import styles (automatically injected into <head>).
import './css/index.css';
全部的代碼以下：
import './css/index.css';

import { a } from './js/a';
import addArray from './js/b';
import debug from 'debug';

// 添加json
import pkg from '../package.json';
console.log( `running version ${pkg.version}` ); // 控制檯輸出 running version 1.0.0

const log = debug('app:log');
// 若是不是正式環境的話，不輸出日誌信息
if (ENV !== 'production') {
  // Enable the logger.
  debug.enable('*');
  log('Logging is enabled!');
  // Enable LiveReload
  document.write(
    '<script src="http://' + (location.host || 'localhost').split(':')[0] +
    ':35729/livereload.js?snipver=1"></' + 'script>'
  );
} else {
  debug.disable();
}

const res1 = a('kongzhi222');
const res2 = addArray([1, 2, 3, 4]);
console.log(11222211)
// Print the results on the page.
const printTarget = document.getElementsByClassName('debug__output')[0];

printTarget.innerText = `sayHelloTo('Jason') => ${res1}\n\n`;
printTarget.innerText += `addArray([1, 2, 3, 4]) => ${res2}`;

2. 安裝PostCss插件
首先須要安裝Rollup版本的PostCss插件，使用命令以下安裝：
npm install --save-dev rollup-plugin-postcss
而後 添加插件到 rollup.config.js中去：
添加代碼以下：

// Rollup plugins
import babel from 'rollup-plugin-babel';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import json from 'rollup-plugin-json';
import replace from 'rollup-plugin-replace';
import uglify from 'rollup-plugin-uglify';
import serve from 'rollup-plugin-serve';
import livereload from 'rollup-plugin-livereload';

// 新增的postcss
import postcss from 'rollup-plugin-postcss';

export default {
  input: './src/main.js',
  output: {
    file: './dist/js/main.min.js',
    format: 'iife'
  },
  plugins: [
    // 新增的postcss
    postcss({
      extensions: ['.css']
    }),
    resolve({
      jsnext: true,  // 該屬性是指定將Node包轉換爲ES2015模塊
      // main 和 browser 屬性將使插件決定將那些文件應用到bundle中
      main: true,  // Default: true 
      browser: true // Default: false
    }),
    commonjs(),
    json(),
    babel({
      exclude: 'node_modules/**'  // 排除node_modules 下的文件
    }),
    replace({
      ENV: JSON.stringify(process.env.NODE_ENV || 'development')
    }),
    (process.env.NODE_ENV === 'production' && uglify()),
    serve({
      open: true, // 是否打開瀏覽器
      contentBase: './', // 入口html的文件位置
      historyApiFallback: true, // Set to true to return index.html instead of 404
      host: 'localhost',
      port: 10002
    }),
    livereload()
  ]
}

運行npm run build 後，能夠看到生成的 dist/js/main.min.js 中的代碼，在文件開頭幾行，能夠看到一個名叫__$styleInject()的新函數；
代碼以下：

function __$styleInject(css, returnValue) {
  if (typeof document === 'undefined') {
    return returnValue;
  }
  css = css || '';
  var head = document.head || document.getElementsByTagName('head')[0];
  var style = document.createElement('style');
  style.type = 'text/css';
  head.appendChild(style);
  
  if (style.styleSheet){
    style.styleSheet.cssText = css;
  } else {
    style.appendChild(document.createTextNode(css));
  }
  return returnValue;
}

這個函數建立了一個<style>元素並設置樣式，而後添加到文檔的<head>標籤中。
但如今這些樣式並無真正地被處理；PostCSS只是直接地傳輸了咱們的樣式。讓咱們添加一些須要的PostCSS插件，使得樣式能在目標瀏覽器上工做。

3. 安裝必要的 PostCSS插件
下面須要安裝四個插件，以下插件：

postcss-simple-vars 可使用Sass風格的變量(e.g. $myColor: #fff;，color: $myColor;)而不是冗長的CSS語法(e.g. :root {--myColor: #fff}，color: var(--myColor))。
postcss-nested 容許使用嵌套規則。實際上我不用它寫嵌套規則；
postcss-cssnext 這個插件集使得大多數現代CSS語法(經過最新的CSS標準)可用，編譯後甚至能夠在不支持新特性的舊瀏覽器中工做。
cssnano — 壓縮，減少輸出CSS文件大小。至關於JavaScript中對應的UglifyJS。

使用以下命令安裝便可：
npm install --save-dev postcss-simple-vars postcss-nested postcss-cssnext cssnano

咱們再來更下 rollup.config.js
如今咱們能夠在rollup.config.js 中引入 postcss插件了，在配置對象的plugins屬性上添加一個postcss。
以下代碼：

// Rollup plugins
import babel from 'rollup-plugin-babel';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import json from 'rollup-plugin-json';
import replace from 'rollup-plugin-replace';
import uglify from 'rollup-plugin-uglify';
import serve from 'rollup-plugin-serve';
import livereload from 'rollup-plugin-livereload';
// 新增 rollup-plugin-postcss 插件
import postcss from 'rollup-plugin-postcss';

// 新增 postcss plugins
import simplevars from 'postcss-simple-vars';
import nested from 'postcss-nested';
import cssnext from 'postcss-cssnext';
import cssnano from 'cssnano';

export default {
  input: './src/main.js',
  output: {
    file: './dist/js/main.min.js',
    format: 'iife'
  },
  plugins: [
    // 新增的
    postcss({
      extensions: ['.css'],
      plugins: [
        simplevars(),
        nested(),
        cssnext({ warnForDuplicates: false, }),
        cssnano()
      ]
    }),
    resolve({
      jsnext: true,  // 該屬性是指定將Node包轉換爲ES2015模塊
      // main 和 browser 屬性將使插件決定將那些文件應用到bundle中
      main: true,  // Default: true 
      browser: true // Default: false
    }),
    commonjs(),
    json(),
    babel({
      exclude: 'node_modules/**'  // 排除node_modules 下的文件
    }),
    replace({
      ENV: JSON.stringify(process.env.NODE_ENV || 'development')
    }),
    (process.env.NODE_ENV === 'production' && uglify()),
    serve({
      open: true, // 是否打開瀏覽器
      contentBase: './', // 入口html的文件位置
      historyApiFallback: true, // Set to true to return index.html instead of 404
      host: 'localhost',
      port: 10002
    }),
    livereload()
  ]
}

如今咱們再來運行 npm run build, 後再打開瀏覽器就能夠看到了head裏面新增樣式了，而且已經壓縮的。

注意：在cssnext()中配置了{ warnForDuplicates: false }是由於它和cssnano()都使用了Autoprefixer，會致使一個警告。 咱們只須要知道它被執行了兩次(在這個例子中沒什麼壞處)而且取消了警告。

同理咱們運行命令 npm run watch 後，修改css，也能實時加載到最新的css了。

更多能夠查看rollup中文文檔

github項目rollup打包查看