摘要：通過這個教程學習如何使用打包工具配合來取代或處理樣式文件。使用這個命令安裝插件更新。如果你沒有項目的副本，你可以通過這條命令克隆在結束這個狀態(tài)下的項目為添加監(jiān)聽插件。在代碼塊內(nèi)，添加如下內(nèi)容簡單起見我省略了文件的大部分內(nèi)容

通過這個教程學習如何使用JavaScript打包工具Rollup配合PostCSS來取代Grunt或Gulp處理樣式文件。

上一篇文章中，我們完成了使用Rollup打包前端JavaScript入門。

這篇文章包含Part II和Part III。

Part II會繼續(xù)在上次的項目中進行，為Rollup添加處理樣式的能力，使用PostCSS進行一些轉換，讓我們能使用更簡單的變量寫法和嵌套規(guī)則等語法糖。

然后完成Part III，圓滿結束。第三部分將為項目添加文件監(jiān)聽和LiveReload，這樣每當文件變化時就不用再手動地打包bundle文件了。

我們會在上周的項目基礎上繼續(xù)進行，因此如果你還沒有看上一節(jié)，推薦你先看一下。

NOTE: 如果你沒有項目的副本，你可以通過這條命令克隆在Part I結束這個狀態(tài)下的項目：git clone -b part-2-starter --single-branch https://github.com/jlengstorf/learn-rollup.git

你可以輕松地處理CSS并注入到文檔的head中，這取決于你的項目如何配置，也是Rollup另一個優(yōu)點。

另外，所有的構建過程都在一個地方，降低了開發(fā)流程的復雜度 - 這對我們很有幫助，尤其是在團隊協(xié)作時。

不過糟糕的是，我們使得樣式依賴JavaScript，并且在無樣式HTML在樣式注入前會產(chǎn)生一個短暫的閃爍。這對有些項目來說是無法接受的，并且應該通過像使用PostCSS提取等方式解決。

既然這篇文章是關于Rollup的，那么：來吧。讓我們使用Rollup！

如果你之前從來沒用過構建工具，可能感覺這樣有點怪，但請跟著我繼續(xù)。為了在文檔中使用樣式，我們不會像平常那樣使用標簽，取而代之，我們將在main.min.js中使用import語句。

現(xiàn)在在src/scripts/main.js開頭加載樣式：

+ // Import styles (automatically injected into ).
+ import "../styles/main.css";

  // Import a couple modules for testing.
  import { sayHelloTo } from "./modules/mod1";
  import addArray from "./modules/mod2";

  // Import a logger for easier debugging.
  import debug from "debug";
  const log = debug("app:log");

  // The logger should only be disabled if we’re not in production.
  if (ENV !== "production") {

    // Enable the logger.
    debug.enable("*");
    log("Logging is enabled!");
  } else {
    debug.disable();
  }

  // Run some functions from our imported modules.
  const result1 = sayHelloTo("Jason");
  const result2 = addArray([1, 2, 3, 4]);

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

  printTarget.innerText = `sayHelloTo("Jason") => ${result1}

`;
  printTarget.innerText += `addArray([1, 2, 3, 4]) => ${result2}`;

首先需要Rollup PostCSS插件，使用如下命令安裝：

npm install --save-dev rollup-plugin-postcss

然后，添加插件到rollup.config.js:

  // Rollup plugins
  import babel from "rollup-plugin-babel";
  import eslint from "rollup-plugin-eslint";
  import resolve from "rollup-plugin-node-resolve";
  import commonjs from "rollup-plugin-commonjs";
  import replace from "rollup-plugin-replace";
  import uglify from "rollup-plugin-uglify";
+ import postcss from "rollup-plugin-postcss";

  export default {
    entry: "src/scripts/main.js",
    dest: "build/js/main.min.js",
    format: "iife",
    sourceMap: "inline",
    plugins: [
+     postcss({
+       extensions: [ ".css" ],
+     }),
      resolve({
        jsnext: true,
        main: true,
        browser: true,
      }),
      commonjs(),
      eslint({
        exclude: [
          "src/styles/**",
        ]
      }),
      babel({
        exclude: "node_modules/**",
      }),
      replace({
        ENV: JSON.stringify(process.env.NODE_ENV || "development"),
      }),
      (process.env.NODE_ENV === "production" && uglify()),
    ],
  };

現(xiàn)在我們已經(jīng)能夠處理樣式了，可以看一下新生成的bundle，看看它是如何工作的。

運行./node_modules/.bin/rollup -c，然后看一下生成的build/js/main.min.js，在文件開頭幾行，可以看到一個名叫__$styleInject()的新函數(shù)：

function __$styleInject(css) {
  css = css || "";
  var head = document.head || document.getElementsByTagName("head")[0];
  var style = document.createElement("style");
  style.type = "text/css";
  if (style.styleSheet){
    style.styleSheet.cssText = css;
  } else {
    style.appendChild(document.createTextNode(css));
  }
  head.appendChild(style);
}
__$styleInject("/* Styles omitted for brevity... */");

簡單地說，這個函數(shù)創(chuàng)建了一個