什么是 rollup
Rollup is a module bundler for JavaScript which compiles small pieces of code into something larger and more complex, such as a library or application. It uses the standardized ES module format for code, instead of previous idiosyncratic solutions such as CommonJS and AMD. ES modules let you freely and seamlessly combine the most useful individual functions from your favorite libraries. Rollup can optimize ES modules for faster native loading in modern browsers, or output a legacy module format allowing ES module workflows today.
安裝
yarn add -D rollup # 或者 npm i -D rollup
組件庫目錄結構
|——dist
|——|——xxx.umd.js
|——|——xxx.cjs.js
|——|——xxx.es.js
|——src
|——|——libs
|——|——|——xxx.sdk.js
|——|——styles
|——|——|——xxx.css
|——|——main.js
|——package.json
|——rollup.config.js
打包js
js會打包成3種文件格式
- xxx.umd.js browser-friendly UMD build
- xxx.cjs.js CommonJS (for Node)
- xxx.es.js ES module (for bundlers) build.
input: 'src/main.js',
output: [
{
name: 'IrtVerifier',//方法名
file: pkg.browser,
format: 'umd',
},
{ file: pkg.main, format: 'cjs', exports: 'auto' },
{
file: pkg.module,
format: 'es',
},
],
其中umd必須指定方法名，因為umd最終會綁定到瀏覽器的window對象上，如果方法名與sdk種定義的方法名不一致，回報錯:Uncaught ReferenceError: xxx is not defined
//xxx.umd.js
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define(factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.xxx= factory());//xxx方法綁定到瀏覽器的window對象上
}(this, (function () { 'use strict';
如何打包css
yarn add -D rollup-plugin-postcss
使用默認配置，css將直接打包到js里,並且在引入js時直接插入head標簽中
- 引入樣式
// Inject to `<head>` and also available as `style`
import style from './style.css'
- rollup 配置
// rollup config
import postcss from 'rollup-plugin-postcss'
export default [
...
plugins: [
postcss(),
],
...
]
- 打包結果
//xxx.umd.js
function styleInject(css, ref) {
if ( ref === void 0 ) ref = {};
var insertAt = ref.insertAt;
if (!css || typeof document === 'undefined') { return; }
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
if (insertAt === 'top') {
if (head.firstChild) {
head.insertBefore(style, head.firstChild);
} else {
head.appendChild(style);
}
} else {
head.appendChild(style);
}
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
}
var css_random_number = "your css";
styleInject(css_random_number);
如果需要將css提取為單獨的文件，只需要添加配置 extract:true
...
plugins: [
postcss({
extract: true,
// Or with custom file name
extract: path.resolve('dist/my-custom-file-name.css')
}),
],
...