Rollup, smaller package size, more options for input file formats, such as ES6 Module, CommonJS, etc.
For a comparison of Rollup and Webpack packaging performance optimization, see tree-shaking Performance Optimization Practices – Principles in this article
This article mainly documents an issue that JSX, which rollup packages the Ve2. X component library, was unable to recognize. Rollup – A complete how-to guide to Rollup. Rollup – a complete how-to guide to Rollup
Rollup Official English document, English document information updated in time.
The basic configuration required for the component library Vue2 2.x
-
Component library infrastructure version
vue 2.611. node 14.4. 0 babel 7.14. 0 Copy the code -
The component library’s project structure references the Element-UI structure.
Install a rollup
npm install --global rollup Copy the code
Component library development certainly includes modules, ES6, and so on, so Plugins are needed to change some of the Rollup behavior during packaging.
-
Installing a plug-in
Rollup official plugin library
Since the Node module uses CommonJS, it is not Rollup compatible and therefore cannot be used directly. Therefore, these two plug-ins mainly solve this problem.
npm i -D @rollup/plugin-node-resolve @rollup/plugin-commonjs Copy the codeRollup-plugin-vue plugin needs to be specified. @5.1.9 corresponds to vue2.x, @6.0.0 corresponds to vue3.x
npm i -D rollup-plugin-vue@latest Copy the codeRollup code compression plugin
rollup-plugin-terser Copy the codeRollup-plugin-babel is the key pit to tread on. Open source library, a rollup plugin – Babel this plug-in moved to @ rollup/plugin – Babel, then update the @ rollup/plugin – Babel debugging, didn’t use JSX syntax of packaging is no problem, use the JSX syntax can identify, Rollup-plugin-babel works fine.
Rollup-plugin-babel requires the specified version, babel7.x
npm install --save-dev rollup-plugin-babel@latest Copy the codebabel6.x
npm install --save-dev rollup-plugin-babel@3 Copy the codeRollup-plugin-babel requires Babel support
npm install --save-dev @babel/core @babel/cli @babel/preset-env Copy the codeVue2.0 JSX requires babel-plugin-transform-vuue – JSX support
npm install\ babel-plugin-syntax-jsx\ babel-plugin-transform-vue-jsx\ babel-helper-vue-jsx-merge-props\ babel-preset-env\ --save-dev Copy the code
The configuration file is as follows:
- .babelrc
{
"presets": [
"@vue/app"["@babel/preset-env",
{
"modules": false}]],"ignore": ["node_modules/**"]."plugins": [
"@babel/plugin-transform-runtime"."@babel/plugin-syntax-dynamic-import"."@babel/plugin-proposal-object-rest-spread"]}Copy the code- rollup.config.js
import {camelCase} from 'lodash'
import babel from 'rollup-plugin-babel'
//import { babel } from '@rollup/plugin-babel'
import commonjs from '@rollup/plugin-commonjs'
import json from '@rollup/plugin-json'
import resolve from '@rollup/plugin-node-resolve'
import replace from '@rollup/plugin-replace' // Replace the specified string in the code when packaging
import vue from 'rollup-plugin-vue'
import postcss from 'rollup-plugin-postcss'
import filesize from 'rollup-plugin-filesize' // Displays the size of the package file
import {terser} from 'rollup-plugin-terser' // Code compression
import pack from './package.json'
const projectName = pack.name
const sass = require('node-sass')
const path = require('path')
// compute globals from dependencies
const globals =
pack.dependencies &&
Object.assign( {}, ... Object.keys(pack.dependencies).map((key) = > ({
[key]: camelCase(key),
}))
)
const builds = {
// (CommonJS). Used by bundlers e.g. Webpack & Browserify
cjs: {
entry: 'src/index.js'.dest: `dist/${projectName}.common.js`.format: 'cjs',},// (ES Modules). Used by bundlers that support ES Modules,
// e.g. Rollup & Webpack 2
esm: {
entry: 'src/index.js'.dest: `dist/${projectName}.esm.js`.format: 'es',},// build (Browser)
'umd-dev': {
entry: 'src/index.umd.js'.dest: `dist/${projectName}.js`.format: 'umd'.env: 'development',},// production build (Browser)
'umd-prod': {
entry: 'src/index.umd.js'.dest: `dist/${projectName}.min.js`.format: 'umd'.env: 'production',}}const processSass = function(context) {
return new Promise((resolve, reject) = > {
sass.render(
{
file: context,
},
function(err, result) {
if(! err) { resolve(result) }else {
reject(err)
}
}
)
})
}
function genConfig(name) {
const opts = builds[name]
const config = {
input: opts.entry,
external: (id) = > pack.dependencies && pack.dependencies[id], // exclude dependencies from build
plugins: [
vue({compileTemplate: true.css: true}),
babel({
runtimeHelpers: true.exclude: 'node_modules/**',
}),
resolve({
browser: true.preferBuiltins: false.extensions: ['.js'.'.json'.'.jsx'.'.vue'],
}),
commonjs(),
json(),
postcss({
minimize: true.extensions: ['.css'.'.scss'].process: processSass,
extract: path.resolve(`dist/style/${projectName}.css`)
}),
filesize(),
].concat(opts.plugins || []),
output: {
exports: 'named'.file: opts.dest,
format: opts.format,
// define globals in window from external dependencies
globals,
name: opts.moduleName || projectName,
},
}
if (opts.env) {
config.plugins.push(
replace({
'process.env.NODE_ENV': JSON.stringify(opts.env),
})
)
// minify on production targets
if (opts.env === 'production') {
config.plugins.push(terser())
}
}
Object.defineProperty(config, '_name', {
enumerable: false.value: name,
})
return config
}
const target = process.env.TARGET || 'umd-prod'
module.exports = genConfig(target)
Copy the code- Configuring scripts
Configure the build script in package.json in the root directory
"scripts": {
"build-lib": "npm run build:cjs && npm run build:es && npm run build:umd:dev && npm run build:umd:prod"."build:cjs": "rollup -c --environment TARGET:cjs"."build:es": "rollup -c --environment TARGET:esm"."build:umd:dev": "rollup -c --environment TARGET:umd-dev"."build:umd:prod": "rollup -c --environment TARGET:umd-prod"."pub": "npm run build-lib && npm publish --access public"
}
Copy the codeExisting problems
@rollup/plugin-babel Replace rollup-plugin-babel pending resolution, welcome to discuss in the comments section.