zqy233的前端学习笔记

主题

回到顶部
索引

插件

github官方插件列表

版本要求

  • Node v8.0.0+
  • Rollup v1.20.0+

在webpack中，使用loader对源文件进行预处理，plugin完成构建打包的特定功能需求

而rollup中，plugin兼具webpack中loader和plugin的功能

起步

新建项目，新建src/index.js

js
console.log('helloworld')

console.log('helloworld')

项目根目录创建一个rollup.config.js配置文件

js
export default {
  input: 'src/index.js',
  output: {
    dir: 'output',
    format: 'cjs'
  },
  plugins: []
}

export default {
  input: 'src/index.js',
  output: {
    dir: 'output',
    format: 'cjs'
  },
  plugins: []
}

安装rollup

sh
npm i -D rollup

npm i -D rollup

package.json中设置scripts，现在使用yarn dev即可打包

json
{
  "devDependencies": {
    "rollup": "^2.71.1"
  },
  "scripts": {
    "dev": "rollup -c"
  }
}

{
  "devDependencies": {
    "rollup": "^2.71.1"
  },
  "scripts": {
    "dev": "rollup -c"
  }
}

打包后生成output文件夹，其下存在一个index.js文件，内容如下：

js
'use strict';

console.log("helloworld");

'use strict';

console.log("helloworld");

@rollup/plugin-auto-install

自动下载打包文件中引入的依赖，即使package.json中还没有

下载

js
npm i -D @rollup/plugin-auto-install @rollup/plugin-node-resolve

npm i -D @rollup/plugin-auto-install @rollup/plugin-node-resolve

用法

js
import auto from '@rollup/plugin-auto-install'
import resolve from '@rollup/plugin-node-resolve'

export default {
  ...
  plugins: [auto(), resolve()]
}

import auto from '@rollup/plugin-auto-install'
import resolve from '@rollup/plugin-node-resolve'

export default {
  ...
  plugins: [auto(), resolve()]
}

@rollup/plugin-html

用于创建HTML文件来运行rollup打包后的模块

下载

sh
npm i @rollup/plugin-html -D

npm i @rollup/plugin-html -D

用法

js
const html = require("@rollup/plugin-html")

export default {
  ...
  plugins: [html()]
}

const html = require("@rollup/plugin-html")

export default {
  ...
  plugins: [html()]
}

选项

attributes

类型: Object 默认值: { html: { lang: 'en' }, link: null, script: null }

指定html, link, 和script元素的其他属性 . 对于每个属性，提供一个对象，其中包含表示html元素属性名称和值的键值对. 默认情况下, html 元素的属性为 lang="en"

注意：如果使用es / esm 输出格式, { type: 'module'} 将自动添加至attributes.script

fileName

类型: String 默认值: 'index.html'

meta

类型: Array[...object] 默认值: [{ charset: 'utf-8' }]

指定用于创建<meta> 元素的属性，对每一个数组对象，提供一个对象，其中包含表示<meta>元素属性名称和值的键值对

publicPath

类型: String 默认值: ''

指定HTML输出中所有打包资源（文件）的前置路径

template

类型: Function 默认值: internal function 返回值: String

指定为HTML输出提供呈现源的函数。该功能应采用以下形式：

js
const template = ({ attributes, bundle, files, publicPath, title }) => { ... }

const template = ({ attributes, bundle, files, publicPath, title }) => { ... }
  • attributes: 对应传递给插件的attributes选项
  • bundle: 一个 Object 包含键值对AssetInfo或者ChunkInfo
  • files: 一个 AssetInfo 或 ChunkInfo 数组， 包含任何入口 (isEntry: true) 文件, 以及打包文件中将要引用的任何资源（isAsset:true）文件
  • publicPath: 对应 publicPath 选项传递给插件
  • title:对应 title 选项传递给插件

默认情况下，这是内部处理的，并生成以下格式的HTML：

html
<!DOCTYPE html>
<html ${attributes}>
  <head>
    ${metas}
    <title>${title}</title>
    ${links}
  </head>
  <body>
    ${scripts}
  </body>
</html>

<!DOCTYPE html>
<html ${attributes}>
  <head>
    ${metas}
    <title>${title}</title>
    ${links}
  </head>
  <body>
    ${scripts}
  </body>
</html>

${links} 表示所有用于引入css的 <link ..标签

${scripts}表示所有用于引入js的 <script... 标签

title

类型: String 默认值:: 'Rollup Bundle'

指定html文档的标题

导出

makeHtmlAttributes(attributes)

参数: attributes, 类型: Object 返回值: String

使用具有表示HTML元素属性名称和值的键值对的对象。该函数将所有对作为有效HTML元素属性的空格分隔字符串返回。例如

js
const { makeHtmlAttributes } = require('@rollup/plugin-html');

makeHtmlAttributes({ lang: 'en', 'data-batcave': 'secret' });
// -> 'lang="en" data-batcave="secret"'

const { makeHtmlAttributes } = require('@rollup/plugin-html');

makeHtmlAttributes({ lang: 'en', 'data-batcave': 'secret' });
// -> 'lang="en" data-batcave="secret"'

@rollup/plugin-typescript

用于Rollup和Typescript之间的无缝集成

下载

sh
npm i @rollup/plugin-typescript -D

npm i @rollup/plugin-typescript -D

用法

js
import typescript from '@rollup/plugin-typescript';

export default {
  ...
  plugins: [typescript()]
}

import typescript from '@rollup/plugin-typescript';

export default {
  ...
  plugins: [typescript()]
}

rollup-plugin-uglify

uglify意思丑化混淆，该插件用于减小打包后模块的体积

js
const { codeFrameColumns } = require("@babel/code-frame");
const Worker = require("jest-worker").default;
const serialize = require("serialize-javascript");


function uglify(userOptions = {}) {
  if (userOptions.sourceMap != null) {
    throw Error("sourceMap option is removed, use sourcemap instead");
  }

  const normalizedOptions = Object.assign({}, userOptions, {
    sourceMap: userOptions.sourcemap !== false
  });

  ["sourcemap"].forEach(key => {
    if (normalizedOptions.hasOwnProperty(key)) {
      delete normalizedOptions[key];
    }
  });

  const minifierOptions = serialize(normalizedOptions);

  return {
    name: "uglify",

    renderStart() {
      this.worker = new Worker(require.resolve("./transform.js"), {
        numWorkers: userOptions.numWorkers
      });
    },

    renderChunk(code) {
      return this.worker.transform(code, minifierOptions).catch(error => {
        const { message, line, col: column } = error;
        console.error(
          codeFrameColumns(code, { start: { line, column } }, { message })
        );
        throw error;
      });
    },

    generateBundle() {
      this.worker.end();
    },

    renderError() {
      this.worker.end();
    }
  };
}

exports.uglify = uglify;

const { codeFrameColumns } = require("@babel/code-frame");
const Worker = require("jest-worker").default;
const serialize = require("serialize-javascript");


function uglify(userOptions = {}) {
  if (userOptions.sourceMap != null) {
    throw Error("sourceMap option is removed, use sourcemap instead");
  }

  const normalizedOptions = Object.assign({}, userOptions, {
    sourceMap: userOptions.sourcemap !== false
  });

  ["sourcemap"].forEach(key => {
    if (normalizedOptions.hasOwnProperty(key)) {
      delete normalizedOptions[key];
    }
  });

  const minifierOptions = serialize(normalizedOptions);

  return {
    name: "uglify",

    renderStart() {
      this.worker = new Worker(require.resolve("./transform.js"), {
        numWorkers: userOptions.numWorkers
      });
    },

    renderChunk(code) {
      return this.worker.transform(code, minifierOptions).catch(error => {
        const { message, line, col: column } = error;
        console.error(
          codeFrameColumns(code, { start: { line, column } }, { message })
        );
        throw error;
      });
    },

    generateBundle() {
      this.worker.end();
    },

    renderError() {
      this.worker.end();
    }
  };
}

exports.uglify = uglify;

@rollup/plugin-run

https://github.com/rollup/plugins/tree/master/packages/run

一个rollup插件，在每次打包后使用node直接运行你的打包文件

a rollup plugin which runs your bundles in node once they're built

使用这个插件相较于nodemon更快

using this plugin gives much faster results compared to what you would do with nodemon

要求/Requirements

这个插件要求 Node 版本 (v14.0.0+) and Rollup v2.0.0+

This plugin requires an LTS Node version (v14.0.0+) and Rollup v2.0.0+\

rollup-plugin-babel

用于转换es6语法

sh
npm i rollup-plugin-babel @babel/core @babel/preset-env -D

npm i rollup-plugin-babel @babel/core @babel/preset-env -D
js
import babel from 'rollup-plugin-babel'
export default {
  ...
  plugins:[
    babel({
        exclude: 'node_modules/**'
    })
  ]
}

import babel from 'rollup-plugin-babel'
export default {
  ...
  plugins:[
    babel({
        exclude: 'node_modules/**'
    })
  ]
}

项目根目录创建.babelrc文件

js
{
  "presets": [
      [
        "@babel/preset-env"
      ]
    ]
}

{
  "presets": [
      [
        "@babel/preset-env"
      ]
    ]
}

rollup-plugin-commonjs

rollup默认是不支持CommonJS模块的，自己写的时候可以尽量避免使用CommonJS模块的语法，但有些外部库的是cjs或者umd（由webpack打包的），所以使用这些外部库就需要支持CommonJS模块

bash
npm i rollup-plugin-commonjs -D

npm i rollup-plugin-commonjs -D

rollup.config,js中加入

js
import commonjs from 'rollup-plugin-commonjs'
export default {
  ...
  plugins:[
    commonjs()
  ]
}

import commonjs from 'rollup-plugin-commonjs'
export default {
  ...
  plugins:[
    commonjs()
  ]
}

rollup-plugin-postcss

支持css文件的加载、css加前缀、css压缩、默认支持对scss/less的支持等等

sh
npm i rollup-plugin-postcss postcss --D

npm i rollup-plugin-postcss postcss --D

rollup.config,js中加入

js
import postcss from 'rollup-plugin-postcss'
export default {
  ...
  plugins:[
    postcss()
  ]
}

import postcss from 'rollup-plugin-postcss'
export default {
  ...
  plugins:[
    postcss()
  ]
}

autoprefixer

给css3的一些属性加前缀，达到不同浏览器兼容

bash
npm i autoprefixer@8.0.0 --D

npm i autoprefixer@8.0.0 --D
js
import postcss from 'rollup-plugin-postcss'
import autoprefixer from 'autoprefixer'
export default {
  ...
  plugins:[
    postcss({
      plugins: [  
        autoprefixer()  
      ]
    })
  ]
}

import postcss from 'rollup-plugin-postcss'
import autoprefixer from 'autoprefixer'
export default {
  ...
  plugins:[
    postcss({
      plugins: [  
        autoprefixer()  
      ]
    })
  ]
}

需要package.json中配置browserslist字段

json
  "browserslist": [
    "defaults",
    "not ie < 8",
    "last 2 versions",
    "> 1%",
    "iOS 7",
    "last 3 iOS versions"
  ]

  "browserslist": [
    "defaults",
    "not ie < 8",
    "last 2 versions",
    "> 1%",
    "iOS 7",
    "last 3 iOS versions"
  ]

cssnano

压缩CSS代码,去除换行和空格

bash
npm i cssnano --D

npm i cssnano --D
js
import postcss from 'rollup-plugin-postcss'
import autoprefixer from 'autoprefixer'
import cssnano from 'cssnano'
export default {
  ...
  plugins:[
    postcss({
      plugins: [  
        autoprefixer()  
        cssnano()
      ]
    })
  ]
}

import postcss from 'rollup-plugin-postcss'
import autoprefixer from 'autoprefixer'
import cssnano from 'cssnano'
export default {
  ...
  plugins:[
    postcss({
      plugins: [  
        autoprefixer()  
        cssnano()
      ]
    })
  ]
}

extract

可配置是否将css单独分离，默认没有extract，css样式生成style标签内联到head中，配置了extract，就会将css抽离成单独的文件

js
postcss({
  plugins: [
    autoprefixer(),
    cssnano()
  ],
  extract: 'css/index.css'  
})

postcss({
  plugins: [
    autoprefixer(),
    cssnano()
  ],
  extract: 'css/index.css'  
})

rollup-plugin-vue

  • vue2：rollup-plugin-vue^5.1.9 + vue-template-compiler
  • vue3：rollup-plugin-vue^6.0.0 + @vue/compiler-sfc
sh
npm i -D rollup-plugin-vue @vue/compiler-sfc

npm i -D rollup-plugin-vue @vue/compiler-sfc
js
import vue from 'rollup-plugin-vue'
import autoprefixer from 'autoprefixer'  
import cssnano from 'cssnano'
export default {
  ...
  plugins:[
    vue({
      style: {
        postcssPlugins: [
          autoprefixer(),
          cssnano()
        ]
      }
    })
  ]
}

import vue from 'rollup-plugin-vue'
import autoprefixer from 'autoprefixer'  
import cssnano from 'cssnano'
export default {
  ...
  plugins:[
    vue({
      style: {
        postcssPlugins: [
          autoprefixer(),
          cssnano()
        ]
      }
    })
  ]
}

rollup-plugin-terser

生产环境中，代码压缩

js
import { terser } from 'rollup-plugin-terser'
export default {
  ...
  plugins:[
    terser()
  ]
}

import { terser } from 'rollup-plugin-terser'
export default {
  ...
  plugins:[
    terser()
  ]
}

rollup-plugin-serve

用于启动一个服务器, 搭配rollup-plugin-livereload一起使用

rollup-plugin-livereload

用于文件变化时，实时刷新页面

js
npm i -D rollup-plugin-serve rollup-plugin-livereload

npm i -D rollup-plugin-serve rollup-plugin-livereload
js
import serve from 'rollup-plugin-serve'
import livereload from 'rollup-plugin-livereload'
export default {
  ...
  plugins:[
    serve({
      contentBase: '',  //服务器启动的文件夹，默认是项目根目录，需要在该文件下创建index.html
      port: 8020   // 端口号，默认10001
    }),    
    livereload('dist')   //watch dist目录，当目录中的文件发生变化时，刷新页面
  ]
}

import serve from 'rollup-plugin-serve'
import livereload from 'rollup-plugin-livereload'
export default {
  ...
  plugins:[
    serve({
      contentBase: '',  //服务器启动的文件夹，默认是项目根目录，需要在该文件下创建index.html
      port: 8020   // 端口号，默认10001
    }),    
    livereload('dist')   //watch dist目录，当目录中的文件发生变化时，刷新页面
  ]
}

Released under the MIT License.

Copyright © 2022.4-2024.7