学习记录
学习记录-rollup
目录
学习记录-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配置文件的格式
- "type": "module"就说明fig.js是 module模块形式
-
scripts rollup -c 不指明配置文件就是 默认fig.js
- 创建fig.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"
}
// fig.jsexport 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是一个特定格式的classjson()]
};
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是一个特定格式的classjson()]
};
三、导出为全局库
name: 'myLib'
//当入口文件有export时，'umd'格式必须指定name
name就是导出库的名字
// fig.jsimport 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是一个特定格式的classjson(),terser()]
};
四、我如何在使用 CommonJS 模块的 Node.js 中使用 Rollup？
Rollup 致力于实现 ES 模块的规范，并不一定会考虑 Node.js，NPM，require()，和 CommonJS 的行为。所以，加载 CommonJS 模块的逻辑和使用 Node.js 的模块位置解析的逻辑都在可选的插件中实现，Rollup 的核心代码并未默认提供这些功能。你只需要通过 npm install 安装 commonjs 和 node-resolve 这两个插件并在 中启用它们，就可以正常使用以上功能。如果模块导入了 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 = !v.ROLLUP_WATCH;export default {input: 'src/main.js',output: {file: 'public/bundle.js',format: 'iife', // immediately-invoked function expression — suitable for <script> tagssourcemap: true},plugins: [resolve(), // tells Rollup how to find date-fns in node_modulescommonjs(), // converts date-fns to ES modulesproduction && terser() // minify, but only in production]
};
五、rollup官方模板项目
关注GitHub项目/rollup-starter-lib
mirrors_curran/rollup-starter-app
六、使用rollup打包react组件
配置
// fig.jsimport 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 = !v.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是一个特定格式的classjson(),replace({preventAssignment: true,&#v.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 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: solve(__dirname, 'src')// OR place `customResolver` here. See explanation below.}]
}),
