rollup的使用

2021-08-20  本文已影响0人  易路先登

1、安装

npm install rollup -D

2、rollup命令执行方式

1、找到可执行文件直接执行

./node_modules/.bin/rollup

2、通过package.json中的scripts字段执行
配置

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

调用

npm run dev

3、全局安装rollup也可以直接执行。不做赘述。

3、简单示例

（1）、准备
创建一个空目录，在当前目录下打开命令行

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'
  }
}

模块化规范：
format的值支持umd,cjs,es
umd`可在浏览器直接运行es``需要 type="module"支持
<script src="" type="module"></script>

4、进阶用法

（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

如果报错找不到babel/core模块，则在当前项目再安装一下npm install @babel/core -D
配置.babelrc，参考官网配置

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

执行

babel-node index.js

rollup-plugin-babel插件**

有些es6新特性在打包时不会转化为es5版本的，比如箭头函数，此时就应该加装上babel插件

安装

npm install rollup-plugin-babel -D

使用

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

然后就会将es6的语法打包时编译为es5的

测试时rollup-plugin-bael版本为4.4.0，没有将es6的转换为es5，可能是浏览器已经能直接运行箭头函数了什么的语法了。如果确实像亲见这个编译过程，请在.babelrc中将目标浏览器调低：

{
  "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给这三个文件带来的改变
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: 外部类库设置 external

有些场景下，虽然我们使用了resolve插件，但我们仍然需将某些库保持外部引用状态，这时我们就需要使用external属性，告诉rollup.js哪些是外部的类库，修改rollup.js的配置文件：
添加external配置项

...
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模块依然作为一个外部模块被引入，而不是将其内容都打包到test.es.js文件中

iv: commonjs模块

如果代码中使用import引入了commonjs规范的模块，则使用babel-node可以执行，但如果打包的话会报错，需要借助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新特性在打包时不会转化为es5版本的，比如箭头函数，此时就应该加装上babel插件

安装

npm install rollup-plugin-babel -D

使用

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

然后就会将es6的语法打包时编译为es5的

测试时rollup-plugin-bael版本为4.4.0，没有将es6的转换为es5，可能是浏览器已经能直接运行箭头函数了什么的语法了。如果确实像亲见这个编译过程，请在.babelrc中将目标浏览器调低：

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

vi: rollup-plugin-json插件

当打包文件时，rollup不支持引入json文件，通过rollup-plugin-json模块可实现该功能。

安装

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()在数组中放到靠前的位置

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校验
eslint官方文档
安装

npm install eslint -D

交互命令配置eslint

./node_modules/.bin/eslint --init

//一次选择如下选项
To check syntax only
JavaScript modules(import/export)
vue.js
Does your project use TypeScript? No
Where does your code run?--->Browser
...其他项根据自己的项目情况定制

.eslintrc.js最终内容

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可以实现按需加载，vue中不需要手动安装，已经自带了
安装

npm install babel-plugin-component -D

修改.babelrc

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

实现按需加载

按需加载目录的基本配置
Test目录中的Test/Test.vue为组件本身，Test/index.js中注册组件，代码如下： 
import Test from './Test.vue'

export default function(Vue){
    Vue.component('TestOne',Test)//这个组件名称即将来在应用中使用的组件名
}

//src/index.js为组件库入口文件
import Test1 from './Test'
import Test2 from './Test2'
import Test3 from './Test3'

export const Test = Test1//使用export即可实现单个组件导出

export default function(Vue){
    Vue.use(Test2)
    Vue.use(Test3)
}
上一篇下一篇

猜你喜欢

热点阅读