基于 `rollup` 搭建 vue 的组件
公西良骏
基于 rollup 搭建 vue 的组件
简单的说，因为对很多类型的静态资源处理没有
webpack强大，但是基于Tree-shaking原理用来打包lib的话，打出来的包，干净，小。所以rollup比较适合打包小型的 lib 库，不适合用来做开发。
1. 项目传送门
主要流程和包
2. 初始化项目
npm init -y
npm i -D rollup
3. 添加配置文件
// rollup.config.js
export default {
input: 'src/main.js',
output: {
file: 'dist/bundle.js',
format: 'cjs'
},
plugins: []
};
2. 添加环境变量
- 安装依赖
npm i -D rollup-plugin-replace cross-env
- 添加
package.json > script命令：
-c: 读取配置文件’;-w: 监听文件变化；
"scripts": {
"start": "cross-env NODE_ENV=development rollup -c -w",
"build": "cross-env NODE_ENV=production rollup -c",
}
- 它在打包时替换文件中的目标字符串
import replace from 'rollup-plugin-replace';
export default {
input: isPrd ? 'src/lib-main.js' : 'src/main.js',
output: {
file: 'dist/bundle.js',
format: 'cjs'
},
plugins: [
replace({
'process.env.NODE_ENV': JSON.stringify(NODE_ENV),
}),
]
};
4. 安装 babel, 用来编译代码。
- 安装依赖
npm i -D rollup-plugin-babel @babel/core @babel/preset-env
- 增加
.babelrc
{
"presets": [
"@babel/preset-env"
]
}
- 添加到
rollup.config.js中：
import babel from 'rollup-plugin-babel';
export default {
input: 'src/main.js',
output: {
file: 'dist/bundle.js',
format: 'cjs'
},
plugins: [
babel({
exclude: 'node_modules/**' // 只编译我们的源代码
}),
]
};
5. 添加 .vue 文件解析
- 安装依赖
npm i -D rollup-plugin-vue vue-template-compiler @vue/compiler-sfc
- 导入到配置文件中
import vue from 'rollup-plugin-vue';
export default {
input: 'src/main.js',
output: {
file: 'dist/bundle.js',
format: 'cjs'
},
plugins: [
vue({
css: true,
compileTemplate: true
}),
]
};
6. 添加本地服务和热更新
- 安装依赖
npm i -D rollup-plugin-serve rollup-plugin-livereload
- 导入到配置文件中
// 热更新
import livereload from "rollup-plugin-livereload";
// 提供服务
import serve from "rollup-plugin-serve";
export default {
input: isPrd ? 'src/lib-main.js' : 'src/main.js',
output: {
file: 'dist/bundle.js',
format: 'cjs'
},
plugins: [
livereload(),
serve({
open: true, // 自动打开页面
port: 3004,
openPage: '/public/index.html', // 打开的页面
contentBase: ''
})
]
};
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
</body>
<script src="../dist/bundle.js"></script>
</html>
7. 添加 eslint + husky
- 导入依赖
npm i -D eslint husky babel-eslint
- 增加
.eslintrc.js
module.exports = {
"root": true,
"parserOptions": {
"parser": "babel-eslint"
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"env": {
"browser": true,
"node": true
},
'rules': {
'arrow-parens': 0,
'generator-star-spacing': 0,
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
"no-unused-vars": [
1
],
"no-console": 1,
"semi": 2,
"indent": [
2,
2
]
}
};
- 增加
.eslintignore
node_modules/
dist/
public/
- 使用 husky
package.json > script:
prepare脚本会在npm install（不带参数）之后自动执行。也就是说当我们执行npm install安装完项目依赖后会执行 husky install命令，该命令会创建.husky/目录并指定该目录为git hooks所在的目录。
{
"scripts": {
"prepare": "husky install"
}
}
- 添加
git hooks:
npx husky add .husky/pre-commit "npm run lint"
// 如果上面的命令不成功，则使用下面的命令
npx husky add .husky/pre-commit
运行完该命令后我们会看到.husky/目录下新增了一个名为pre-commit的shell脚本。也就是说在在执行git commit命令时会先执行pre-commit这个脚本。pre-commit脚本内容如下：
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
# 如果为 undefined，则手动添加
npm run lint
8. 完整的 rollup.config.js
// 解析 vue
import vue from 'rollup-plugin-vue';
// rollup.js 编译支持 npm 模块和 CommonJS 模块
import commonjs from '@rollup/plugin-commonjs';
// 打包前，先清空 dist 文件夹
import clear from 'rollup-plugin-clear';
// 编译代码
import babel from 'rollup-plugin-babel';
// 压缩代码
import { uglify } from 'rollup-plugin-uglify';
// 热更新
import livereload from "rollup-plugin-livereload";
// 提供服务
import serve from "rollup-plugin-serve";
// 将我们编写的源码与依赖的第三方库进行合并
import resolve from "rollup-plugin-node-resolve";
// 替换环境变量
import replace from 'rollup-plugin-replace';
const NODE_ENV = process.env.NODE_ENV;
let envPlugins = [];
const isPrd = NODE_ENV === 'production';
if (isPrd) {
envPlugins = [
uglify(),
];
} else {
envPlugins = [
livereload(),
serve({
open: true, // 自动打开页面
port: 3004,
openPage: '/public/index.html', // 打开的页面
contentBase: ''
})
];
}
export default {
input: isPrd ? 'src/lib-main.js' : 'src/main.js',
output: {
file: 'dist/bundle.js',
format: 'cjs'
},
plugins: [
clear({
targets: ['dist'],
watch: true,
}),
vue({
css: true,
compileTemplate: true
}),
replace({
'process.env.NODE_ENV': JSON.stringify(NODE_ENV),
}),
resolve(),
commonjs(),
babel({
exclude: 'node_modules/**' // 只编译我们的源代码
}),
...envPlugins
]
};
9. 完整的 package.json
{
"name": "rollup-vue-dev",
"version": "1.0.0",
"description": "基于 rollup 搭建的 vue 环境",
"main": "dist/bundle.js",
"scripts": {
"start": "cross-env NODE_ENV=development rollup -c -w",
"build": "cross-env NODE_ENV=production rollup -c",
"lint": "eslint --ext .js,.vue src",
"prepare": "husky install"
},
"repository": {
"type": "git",
"url": "git+https://github.com/wgm7512/rollup-vue-dev.git"
},
"keywords": [
"rollup",
"vue",
"lib"
],
"author": "汪贵敏",
"license": "MIT",
"bugs": {
"url": "https://github.com/wgm7512/rollup-vue-dev/issues"
},
"homepage": "https://github.com/wgm7512/rollup-vue-dev#readme",
"devDependencies": {
"@babel/core": "^7.15.5",
"@babel/preset-env": "^7.15.4",
"@rollup/plugin-commonjs": "^20.0.0",
"@vue/compiler-sfc": "^3.2.8",
"babel-eslint": "^10.1.0",
"cross-env": "^7.0.3",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^7.17.0",
"husky": "^7.0.2",
"rollup": "^2.56.3",
"rollup-plugin-babel": "^4.4.0",
"rollup-plugin-clear": "^2.0.7",
"rollup-plugin-css": "^1.0.10",
"rollup-plugin-livereload": "^2.0.5",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-replace": "^2.2.0",
"rollup-plugin-scss": "^3.0.0",
"rollup-plugin-serve": "^1.1.0",
"rollup-plugin-uglify": "^6.0.4",
"rollup-plugin-vue": "^5.0.0",
"vue-template-compiler": "^2.6.14"
},
"dependencies": {
"vue": "^2.6.14"
}
}
类似资料：