Get into the habit of writing together! This is the 3rd day of my participation in the "Nuggets Daily New Plan · April Update Challenge",Click to view event details。
Rollup packaging
The goal of this chapter is toComponents based on the storybook frameworkProject is published.
Before releasing the project, we also need to package the project, here we choose to use Rollup
package .
Why choose to use Rollup
packaging
Rollup
It is a module packager andwebpack
similar, many open source libraries and frameworks useRollup
packagingRollup
SupportTree-shaking
, in open source static analysis codeimport
, exclude code that is not usedwebpack
Although it is also supported, we need to configure it manually
- The packaged result
webpack
is - It
Rollup
is more
Reference article:The use of the Rollup packaging tool (super detailed, super basic, super simple with code screenshots)
Install dependencies
Because we need to use it Rollup
for packaging, we need to install all his dependencies
-
Rollup
-
rollup-plugin-terser
: compress the code -
[email protected]
: Compile single-file components into js code.- Why specify a version? Because his latest component is for Vue3 and my current code is for Vue2..
-
vue-template-compiler
: Creation of a tierollup-plugin-vue
-in job
yarn add rollup rollup-plugin-terser rollup-plugin-vue@5.1.9 vue-template-compiler -D -W
复制代码
Rollup
configuration file
After installing the dependencies, we need to configure Rollup
the configuration files. Here we first show button
the packaging of , and then we will demonstrate the packaging of all components.
button
packaging
First we create a file in button
the rollup.config.js
folder
file structure
Configuration content
import vue from 'rollup-plugin-vue'
import { terser } from 'rollup-plugin-terser'
import { terser } from 'rollup-plugin-terser'
import vue from 'rollup-plugin-vue'
module.exports = [
{
input: 'index.js',
output: [
{
file: 'dist/index.js',
format: 'es'
}
],
plugins: [
vue({
// Dynamically inject css as a <style> tag
css: true,
// Explicitly convert template to render function
compileTemplate: true
}),
terser()
]
}
]
复制代码
This configuration file webpack
is also very similar, we configured separately:
- entry (input)
- export (output)
- Plugins
Pack
Then we modify the button
files package.json
in the folder
"scripts": {
// 添加
"build": "rollup -c",
},
复制代码
Running the script At this point, our script is done running, but! The problem is, we have a lot of components with many folders and cannot be packaged one by one like buttons, so how do we do it? ? ?
package all components
Here we need to add a few more dependency files:
plugin-json
: You can let rollup load the json file, which we will use in the configuration filerollup-plugin-postcss
:(rollup-plugin-postcss doesn't support two solutions for less imports)[juejin.cn/post/692083…]plugin-node-resolve
: Package the dependent third-party packages in
yarn add @rollup/plugin-json rollup-plugin-postcss @rollup/plugin-node-resolve -D -W
复制代码
configuration file
Create rollup.config.js in the project root directory
import fs from 'fs'
import path from 'path'
import json from '@rollup/plugin-json'
import vue from 'rollup-plugin-vue'
import postcss from 'rollup-plugin-postcss'
import { terser } from 'rollup-plugin-terser'
import { nodeResolve } from '@rollup/plugin-node-resolve'
const isDev = process.env.NODE_ENV !== 'production'
// 公共插件配置
const plugins = [
vue({
// Dynamically inject css as a <style> tag
css: true,
// Explicitly convert template to render function
compileTemplate: true
}),
json(),
nodeResolve(),
postcss({
// 把 css 插入到 style 中
// inject: true,
// 把 css 放到和js同一目录
extract: true
})
]
// 如果不是开发环境,开启压缩
isDev || plugins.push(terser())
// packages 文件夹路径
const root = path.resolve(__dirname, 'packages')
module.exports = fs.readdirSync(root)
// 过滤,只保留文件夹
.filter(item => fs.statSync(path.resolve(root, item)).isDirectory())
// 为每一个文件夹创建对应的配置
.map(item => {
const pkg = require(path.resolve(root, item, 'package.json'))
return {
input: path.resolve(root, item, 'index.js'),
output: [
{
exports: 'auto',
file: path.resolve(root, item, pkg.main),
format: 'cjs'
},
{
exports: 'auto',
file: path.join(root, item, pkg.module),
format: 'es'
},
],
plugins: plugins
}
})
复制代码
Configure scripts in package.json in the root directory
"build": "rollup -c"
复制代码
Set the main and module fields in package.json in each package
"main": "dist/cjs/index.js",
"module": "dist/es/index.js"
复制代码
At this point, our configuration is over