rollup的使用

1、安裝

npm install rollup -D

2、rollup命令執(zhí)行方式

1、找到可執(zhí)行文件直接執(zhí)行

./node_modules/.bin/rollup

2、通過package.json中的scripts字段執(zhí)行
配置

"scripts":{
  "dev":"rollup"
}

調(diào)用

npm run dev

3、全局安裝rollup也可以直接執(zhí)行。不做贅述。

3、簡單示例

（1）、準(zhǔn)備
創(chuàng)建一個(gè)空目錄，在當(dāng)前目錄下打開命令行

npm init

npm install rollup -D

（2）、配置
package.json

"scripts":{
  "dev":"rollup -wc rollup-config-dev.js"
}

rollup-config-dev.js

const path = require('path')
const inputPath = path.resolve(__dirname,'./src/index.js')
const outputPath = path.resolve(__dirname,'./dist/test')

module.exports = {
  input:inputPath,
  output:{
    file:outputPath,
    format:'umd',
    name:'bwdemo'
  }
}

模塊化規(guī)范：
format的值支持umd,cjs,es
umd`可在瀏覽器直接運(yùn)行es``需要 type="module"支持
<script src="" type="module"></script>

4、進(jìn)階用法

（1）多出口配置
rollup-config-dev.js

const path = require('path')
const inputPath = path.resolve(__dirname,'./src/index.js')
const outputPath = path.resolve(__dirname,'./dist/test')

module.exports = {
  input:inputPath,
  output:{
    file:outputPath,
    format:'umd',
    name:'bwdemo'
  }
}

（2）加載模塊壓縮等
i:安裝插件

rollup-plugin-node-resolve該插件允許引入第三方模塊

npm install rollup-plugin-node-resolve -D

rollup-config-dev.js配置

const resolve = require('rollup-plugin-node-resolve')
...
module.exports = {
  input:inputPath,
  output:[{
    file:outputUmdPath,
    format:'umd',
    name:'bwdemo'
  },{
    file:outputEsPath,
    format:'es'
  }],
  plugins:[
      resolve()
  ]
}

babel-node babel-core在node中直接使用es6模塊

npm install @babel/node -g
npm install @babel/core -g
npm install @babel/preset-env -D

如果報(bào)錯(cuò)找不到babel/core模塊，則在當(dāng)前項(xiàng)目再安裝一下npm install @babel/core -D
配置.babelrc，參考官網(wǎng)配置

{
  "presets": [
    [
      "@babel/env",
      {
        "targets": {
          "edge": "17",
          "firefox": "60",
          "chrome": "67",
          "safari": "11.1"
        },
        "useBuiltIns": "usage",
        "corejs": "3.6.5"
      }
    ]
  ]
}

執(zhí)行

babel-node index.js

rollup-plugin-babel插件**

有些es6新特性在打包時(shí)不會轉(zhuǎn)化為es5版本的，比如箭頭函數(shù)，此時(shí)就應(yīng)該加裝上babel插件

安裝

npm install rollup-plugin-babel -D

使用

const babel = require('rollup-plugin-babel')
...
plugins:[
  babel({
    exclude:'node_modules/**'
  })
]

然后就會將es6的語法打包時(shí)編譯為es5的

測試時(shí)rollup-plugin-bael版本為4.4.0，沒有將es6的轉(zhuǎn)換為es5，可能是瀏覽器已經(jīng)能直接運(yùn)行箭頭函數(shù)了什么的語法了。如果確實(shí)像親見這個(gè)編譯過程，請?jiān)?code>.babelrc中將目標(biāo)瀏覽器調(diào)低：

{
  "presets": [
    [
      "@babel/env",
      {
        "targets": {
          "ie":"6"
        },
        "useBuiltIns": "usage",
        "corejs": "3.6.5"
      }
    ]
  ]
}

ii: tree-shaking
shaking 英[??e?k??]抖（掉）大意就是文件樹精簡。

plugin.js

const a = 1;
const b = 2;
function random(){
    console.log('random')
    return '666'
}

export default {
    a,
    b,
    random
}

index.js

import data from './plugin'
console.log(data.random(),data.a,data.b)
export default data.random

打包好的文件 test.es.js

const a = 1;
const b = 2;
function random(){
    console.log('random');
    return '666'
}

var data = {
    a,
    b,
    random
};

console.log(data.random(),data.a,data.b);
var index = data.random;

export { index as default };

tree-shaking給這三個(gè)文件帶來的改變
plugin.js

export const a = 1;
export const b = 2;
export function random(){
    console.log('random')
    return '666'
}

export default {}

index.js

import { random } from './plugin'
console.log(random())
export default random

打包好的文件 test.es.js

function random(){
    console.log('random');
    return '666'
}

console.log(random());

export { random as default };

iii: 外部類庫設(shè)置 external

有些場景下，雖然我們使用了resolve插件，但我們?nèi)匀恍鑼⒛承毂３滞獠恳脿顟B(tài)，這時(shí)我們就需要使用external屬性，告訴rollup.js哪些是外部的類庫，修改rollup.js的配置文件：
添加external配置項(xiàng)

...
external:[
    'the-answer'
]
...

index.js

import answer from 'the-answer'
import { random } from './plugin'
console.log(random(),answer)
export default random

打包好的文件test.es.js

import answer from 'the-answer';

function random(){
    console.log('random');
    return '666'
}

console.log(random(),answer);

export { random as default };

其中answer模塊依然作為一個(gè)外部模塊被引入，而不是將其內(nèi)容都打包到test.es.js文件中

iv: commonjs模塊

如果代碼中使用import引入了commonjs規(guī)范的模塊，則使用babel-node可以執(zhí)行，但如果打包的話會報(bào)錯(cuò)，需要借助commonjs模塊。

安裝：

npm install rollup-plugin-commonjs -D

配置文件修改：


const commonjs = require('rollup-plugin-commonjs')
...
module.exports = {
  plugins:[
      commonjs()
  ]
}

cjs.js

let a = 1;
module.exports.a = a

index.js

import number from './cjs.js'
console.log(number)

v: rollup-plugin-babel插件

有些es6新特性在打包時(shí)不會轉(zhuǎn)化為es5版本的，比如箭頭函數(shù)，此時(shí)就應(yīng)該加裝上babel插件

安裝

npm install rollup-plugin-babel -D

使用

const babel = require('rollup-plugin-babel')
...
plugins:[
  babel({
    exclude:'node_modules/**'
  })
]

然后就會將es6的語法打包時(shí)編譯為es5的

測試時(shí)rollup-plugin-bael版本為4.4.0，沒有將es6的轉(zhuǎn)換為es5，可能是瀏覽器已經(jīng)能直接運(yùn)行箭頭函數(shù)了什么的語法了。如果確實(shí)像親見這個(gè)編譯過程，請?jiān)?code>.babelrc中將目標(biāo)瀏覽器調(diào)低：

{
  "presets": [
    [
      "@babel/env",
      {
        "targets": {
          "ie":"6"
        },
        "useBuiltIns": "usage",
        "corejs": "3.6.5"
      }
    ]
  ]
}

vi: rollup-plugin-json插件

當(dāng)打包文件時(shí)，rollup不支持引入json文件，通過rollup-plugin-json模塊可實(shí)現(xiàn)該功能。

安裝

npm install rollup-plugin-json -D

配置

const json = require('rollup-plugin-json')
....
module.exports = {
  ....
  plugins:[
      json()
  ]
}

使用

import pkg from '../package.json'
console.log(pkg)

vii: rollup-plugin-terser插件

壓縮js文件的插件

安裝

npm install rollup-plugin-terser -D

配置

const { terser } = require('rollup-plugin-terser')
module.exports = {
  ...
  plugins:[
      terser()
  ],
}

package.json

  ...
 "scripts": {
    "dev": "rollup -wc rollup-config-dev.js",
    "build:prod": "rollup -c rollup-config-prod.js"
  },
  ...

（3）打包vue文件
i:rollup-plugin-vue插件，支持處理.vue后綴的文件。

安裝

npm install rollup-plugin-vue -D
npm install @vue/compiler-sfc -D
npm install rollup-plugin-postcss -D
npm install sass -D

配置

需要注意的是，盡量把vue()在數(shù)組中放到靠前的位置

const path = require('path')
const vue = require('rollup-plugin-vue')
const postcss = require('rollup-plugin-postcss')
const outputEsPath = path.resolve(__dirname,'./dist/test.es.js')
module.exports = {
  input:inputPath,
  output:[{
    file:outputEsPath,
    format:'es',
    globals:{
      vue:'vue'
    }
  }],
  plugins:[
      vue(),
      postcss({
        plugins:[]
      })
  ]
}

（4）、添加eslint校驗(yàn)
eslint官方文檔
安裝

npm install eslint -D

交互命令配置eslint

./node_modules/.bin/eslint --init

//一次選擇如下選項(xiàng)
To check syntax only
JavaScript modules(import/export)
vue.js
Does your project use TypeScript? No
Where does your code run?--->Browser
...其他項(xiàng)根據(jù)自己的項(xiàng)目情況定制

.eslintrc.js最終內(nèi)容

module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": ["plugin:vue/essential","eslint:recommended"],
    "parserOptions": {
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "plugins": [
        "vue"
    ],
    "rules": {
    }
};

package.json中添加命令

"scripts": {
    "lint":"eslint ./src"
}

（5）、按需加載
借助babel-plugin-component可以實(shí)現(xiàn)按需加載，vue中不需要手動安裝，已經(jīng)自帶了
安裝

npm install babel-plugin-component -D

修改.babelrc

{
    "presets":[["es2015",{"modules":fase}]],
    "plugins":[
        "component",
        {
            "libraryName":"element-ui",
            "styleLibraryName":"theme-chalk"
        }
    ]
}

實(shí)現(xiàn)按需加載

按需加載目錄的基本配置

Test目錄中的Test/Test.vue為組件本身，Test/index.js中注冊組件，代碼如下：

import Test from './Test.vue'

export default function(Vue){
    Vue.component('TestOne',Test)//這個(gè)組件名稱即將來在應(yīng)用中使用的組件名
}

//src/index.js為組件庫入口文件
import Test1 from './Test'
import Test2 from './Test2'
import Test3 from './Test3'

export const Test = Test1//使用export即可實(shí)現(xiàn)單個(gè)組件導(dǎo)出

export default function(Vue){
    Vue.use(Test2)
    Vue.use(Test3)
}
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容