建立你的前端開發環境(三) - 使用 npm 的第三方模塊

經過上一篇 建立你的前端開發環境(二) - ES6開發環境 建構後，你的rollup已經可以正常編譯ES6專案了。

如果你的專案需要其他第三方外掛，比方 vue vue-router 等工具，一般方式你可以直接把code掛在script標籤上(全域)

不過實務上我還是喜歡利用 npm 來管理我的外掛模組，比方我使用 yarn add vue 方式來安裝 vue ，然後再使用 import Vue from ‘vue’ 方式來匯入使用。

不過如果依照目前 rollup 專案，編譯時會產生錯誤，因為實際上使用npm管理的模塊，並不會被 rollup 直接使用。如果你需要使用 npm 管理的掛件，必須再安裝以下掛件。

1
yarn add rollup-plugin-node-resolve --dev

它會允許 rollup 使用 node_modules 資料夾中的掛件，不過 npm 所管理的模塊是使用 CommonJS ，為了讓 rollup 可以正確編譯它，需要再安裝以下掛件

1
yarn add rollup-plugin-commonjs --dev

這個掛件可以把 CommonJS 模塊轉換成為 ES6 以便後續讓 bable 去解譯它。

修改你的 rollup.config.js 加上以上兩個掛件

import uglify from 'rollup-plugin-uglify';
import babel from 'rollup-plugin-babel';
import nodeResolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
export default {
    entry: 'src/app.js',
    dest: 'dist/build.js',
    format: 'iife',
    sourceMap: 'inline',
    plugins: [
        nodeResolve({ jsnext: true }), //取用node_modules中的模塊
        commonjs(), //將commonjs轉換為es6
        babel({
            exclude: 'node_modules/**', //掠過檢查node_modules資料夾
        }),
        uglify(),
    ]
};

另外必須注意一下 plugins 的順序，rollup 會依順序解析你的模塊

這樣子你就可以利用 import 來匯入安裝並使用 npm 安裝的模塊了

待續…