学习记录-rollup

肥肥呀呀呀

已于 2023-03-07 22:24:15 修改

阅读量3.9k

点赞数 3

分类专栏：工作经验文章标签：学习

于 2023-02-21 15:15:12 首次发布

本文链接：https://blog.csdn.net/weixin_43575775/article/details/129138792

版权

工作经验专栏收录该内容

12 篇文章 0 订阅

订阅专栏

学习记录-rollup

一、搭建一个基础项目

二、插件支持

三、导出为全局库

四、我如何在使用 CommonJS 模块的 Node.js 中使用 Rollup？

五、rollup官方模板项目

@rollup/plugin-alias插件

Rollup 是一个 JavaScript 模块打包工具，可以将多个小的代码片段编译为完整的库和应用。与传统的 CommonJS 和 AMD 这一类非标准化的解决方案不同，Rollup 使用的是 ES6 版本 Javascript 中的模块标准。新的 ES 模块可以让你自由、无缝地按需使用你最喜爱的库中那些有用的单个函数。这一特性在未来将随处可用，但 Rollup 让你现在就可以，想用就用。

官网：简介 | rollup.js 中文文档 | rollup.js中文网

一、搭建一个基础项目

创建package.json 指明rullup配置文件的格式
1. "type": "module"就说明rollup.config.js是 module模块形式
2. scripts rollup -c 不指明配置文件就是默认rollup.config.js
创建rollup.config.js rullup配置文件

package.json

{
  "name": "code",
  "version": "1.0.0",
  "description": "",
  "main": "dist/bundle.js",
  "scripts": {
    "build": "rollup -c"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "type": "module"
}

rollup.config.js

// rollup.config.js

export default { // 可以是一个数组（用于多个输入的情况）
    input: './src/main.js',
    output: [
        {
            file: './dist/bundle.js',
            format: 'umd',
            name: 'myLib'   
        }
    ]
};

二、插件支持

json支持 @rollup/plugin-json

import json from "@rollup/plugin-json"

export default { // 可以是一个数组（用于多个输入的情况）
    input: './src/main.js',
    output: [
        {
            file: './dist/bundle.js',
            format: 'umd',
            name: 'myLib'   
        }
    ],
    plugins:[
        // rollup插件三一个函数 和webpack不一样 webpack是一个特定格式的class
        json()
    ]
};

js压缩插件 rollup-plugin-terser

import json from "@rollup/plugin-json"
import { terser } from "rollup-plugin-terser"

export default { // 可以是一个数组（用于多个输入的情况）
    input: './src/main.js',
    output: [
        {
            file: './dist/bundle.js',
            format: 'umd',
            name: 'myLib',
        },
        {
            file: './dist/bundle.min.js',
            format: 'umd',
            name: 'myLib',
            plugins: [
                terser()
            ]   
        }
    ],
    plugins:[
        // rollup插件三一个函数 和webpack不一样 webpack是一个特定格式的class
        json()
    ]
};

三、导出为全局库

name: 'myLib'
//当入口文件有export时，'umd'格式必须指定name

name就是导出库的名字

// rollup.config.js

import json from "@rollup/plugin-json"
import { terser } from "rollup-plugin-terser"

export default { // 可以是一个数组（用于多个输入的情况）
    input: './src/main.js',
    output: [
        {
            file: './dist/bundle.js',
            format: 'umd',
            name: 'myLib',
        },
        {
            file: './dist/bundle.min.js',
            format: 'umd',
            // 当main.js 到处export default 的时候就是 name就是 导出的库名
            name: 'myLib',
            // 可以局部也可以全局
            // plugins: [
            //     terser()
            // ]   
        }
    ],
    plugins:[
        // rollup插件三一个函数 和webpack不一样 webpack是一个特定格式的class
        json(),
        terser()
    ]
};

四、我如何在使用 CommonJS 模块的 Node.js 中使用 Rollup？

Rollup 致力于实现 ES 模块的规范，并不一定会考虑 Node.js，NPM，require()，和 CommonJS 的行为。所以，加载 CommonJS 模块的逻辑和使用 Node.js 的模块位置解析的逻辑都在可选的插件中实现，Rollup 的核心代码并未默认提供这些功能。你只需要通过 npm install 安装 commonjs 和 node-resolve 这两个插件并在 rollup.config.js 中启用它们，就可以正常使用以上功能。如果模块导入了 JSON 文件，那么你需要额外安装 json 这个插件。

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import { terser } from 'rollup-plugin-terser';

// `npm run build` -> `production` is true
// `npm run dev` -> `production` is false
const production = !process.env.ROLLUP_WATCH;

export default {
	input: 'src/main.js',
	output: {
		file: 'public/bundle.js',
		format: 'iife', // immediately-invoked function expression — suitable for <script> tags
		sourcemap: true
	},
	plugins: [
		resolve(), // tells Rollup how to find date-fns in node_modules
		commonjs(), // converts date-fns to ES modules
		production && terser() // minify, but only in production
	]
};

五、rollup官方模板项目

关注GitHub项目/rollup-starter-lib

mirrors_curran/rollup-starter-app

六、使用rollup打包react组件

配置

// rollup.config.js

import json from "@rollup/plugin-json"
import terser from '@rollup/plugin-terser';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from "@rollup/plugin-commonjs";
import babel from '@rollup/plugin-babel';
import clear from 'rollup-plugin-clear';
import htmlTemplate from 'rollup-plugin-generate-html-template';
import livereload from 'rollup-plugin-livereload';
import replace from '@rollup/plugin-replace';
const production = !process.env.ROLLUP_WATCH;

export default { // 可以是一个数组（用于多个输入的情况）
    input: './src/main.js',
    output: [
        {
            file: './dist/yc.js',
            format: 'umd',
            name: 'YC',
            sourcemap: true
        },
        {
            file: './public/yc.min.js',
            format: 'umd',
            // 当main.js 到处export default 的时候就是 name就是 导出的库名
            name: 'YC',
            // 可以局部也可以全局
            // plugins: [
            //     terser()
            // ]   
        }
    ],
    plugins:[
        livereload('dist'),
        clear({
            targets: ['./src/dist']
        }),
        resolve({
            customResolveOptions: {
                moduleDirectories: ['node_modules']
            }
        }),
        commonjs({
            include: ["node_modules/**"],
        }),

        // rollup插件三一个函数 和webpack不一样 webpack是一个特定格式的class
        json(),
        replace({
            preventAssignment: true,
            'process.env.NODE_ENV': JSON.stringify('production') // 否则会报：process is not defined的错
        }),

        babel({
            babelHelpers:'runtime',
            exclude: 'node_modules/**', // 只编译源代码
        }), // 会自动读取babel的配置文件

        // babel({
        //     babelHelpers: 'bundled',
        //     "extensions": [".js", ".jsx", ".ts", ".tsx"],
        //     "exclude": "**/node_modules/**",
        //     "presets": [["@babel/env", { "modules": false }], "@babel/preset-react"]
        // }),

      
		production && terser() // minify, but only in production
        // terser(),

   
    ],
     // 指出哪些模块需要被视为外部引入
    //   external: ['lodash']
};

babel配置文件 src/.babelrc.json

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "modules": false
      }
    ],
    ["@babel/preset-react"]
  ],
  "plugins": [
    // "transform-class-properties",
    // "transform-decorators-legacy",
    "@babel/plugin-transform-runtime"
  ]
}

注意

引入react 和react-dom 一直报错 process is not defined的错使用 @rollup/plugin-replace 插件解决
babel设置添加react预设，@babel/preset-react 预设其实是包含了 "@babel/plugin-transform-react-jsx"和 "@babel/plugin-syntax-jsx"插件的不需要额外引入
导入react组件需要使用全称加后缀模式没找到类似webpack的reslove选项

@rollup/plugin-alias插件

If this seems familiar to Webpack users, it should. This is plugin mimics the resolve.extensions and resolve.alias functionality in Webpack.

意思就是同webpack中的reslove选项的作用

import alias from '@rollup/plugin-alias';
const path = require("path")

const customResolver = resolve({
    extensions: [ '.js', '.jsx', '.json', '.less']
});  


// 配置
alias({
    entries: [
        {
        find: '@src',
        replacement: path.resolve(__dirname, 'src')
        // OR place `customResolver` here. See explanation below.
        }]
}),