%20(2).svg)
项目简介
本项目是基于Rollup构建工具和Vue框架的组件化项目打包管理系统。借助Rollup的模块打包功能与Vue单文件组件特性，简化组件的开发、测试和打包流程，助力开发者高效管理和发布组件库。
项目的主要特性和功能
- 采用Rollup构建工具进行模块打包，支持按需加载和代码优化，提升项目性能。
- 通过
rollup-plugin-vue插件，支持Vue单文件组件的打包和部署。 - 利用Babel配置，确保代码在不同环境中的兼容性。
- 集成Jest测试框架，支持单元测试和组件测试，保证代码质量。
- 支持多个组件的独立打包，便于管理和发布。
- 通过
rollup-plugin-postcss插件，支持CSS的提取和注入，方便样式管理。
安装使用步骤
步骤一：安装依赖项
确保已安装Node.js和Yarn包管理器。在项目根目录下运行以下命令安装依赖项：
bash
yarn install
安装测试相关依赖：
bash
yarn add jest @vue/test-utils vue-jest babel-jest -D -W
安装Rollup及相关插件：
bash
yarn add rollup rollup-plugin-terser rollup-plugin-vue@5.1.9 vue-template-compiler -D -W
安装其他Rollup插件：
bash
yarn add @rollup/plugin-json rollup-plugin-postcss @rollup/plugin-node-resolve -D -W
步骤二：配置Jest测试框架
在项目根目录下创建jest.config.js文件，并添加以下配置：
js
module.exports = {
testMatch: ["**/__tests__/**/*.[jt]s?(x)"],
moduleFileExtensions: ["js", "json", "vue"],
transform: {
".*\\.(vue)$": "vue-jest",
".*\\.(js)$": "babel-jest"
}
};
步骤三：配置Babel
在项目根目录下创建babel.config.js文件，并添加以下配置：
js
module.exports = {
presets: [
[
'@babel/preset-env'
]
]
};
步骤四：配置Rollup打包
在项目根目录下创建rollup.config.js文件，并添加以下配置：
```js
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({ css: true, compileTemplate: true }), json(), nodeResolve(), postcss({ extract: true }) ];
isDev || plugins.push(terser());
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 }; }); ```
步骤五：配置组件包的package.json
在每个组件的package.json文件中，添加以下字段：
json
"main": "dist/cjs/index.js",
"module": "dist/es/index.js"
步骤六：运行打包命令
在项目根目录下运行以下命令进行打包：
bash
yarn build
步骤七：运行测试
运行以下命令进行单元测试和组件测试：
bash
yarn test
通过以上步骤，可成功构建并测试基于Rollup和Vue的组件化项目。
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】