npm init -y
npm install rollup rollup-plugin-babel @babel/core @babel/preset-env @rollup/plugin-node-resolve --save-dev
# 用 rollup 打包类库 用 babel 解析高版本 js 语法转低版本 js
package.json
{
"name": "vue2",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "rollup -cw", // rollup 打包，c: 指定配置文件 w: 监听文件变化
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.25.7",
"@babel/preset-env": "^7.25.7",
"rollup": "^2.79.2",
"rollup-plugin-babel": "^4.4.0"
}
}
rollup 配置文件:
rollup.config.js
// rollup 默认可以导出一个对象，作为打包的配置文件
import babel from "rollup-plugin-babel";
import resolve from "@rollup/plugin-node-resolve";
export default {
input: './src/index.js', // 入口
output: {
file: './dist/vue.js', // 出口
name: 'Vue', // 在 global 添加一个 Vue 变量, 使外界可以使用 new Vue 实例化
format: 'umd', // esm es6模块, commonjs 模块 iife 自执行函数 umd(统一模块规范, 可以兼容 amd, commonjs, 不兼容 es6)
sourcemap: true, // 希望可以调试源代码
},
plugins: [
babel({
exclude: "node_modules/**", // 排除 node_modules 所有文件
}),
resolve(), // 导入文件不用写 index.js 后缀
]
}
babel 配置文件:
.babelrc
{
"presets": [
"@babel/preset-env"
]
}
入口文件
// @/src/index.js
// 下边是测试代码
export const a = 100;
export default {
name: 'QB',
age: 18
}
npm run dev
下边是打包后的 ./dist/vue.js
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
typeof define === 'function' && define.amd ? define(['exports'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Vue = {}));
})(this, (function (exports) { 'use strict';
var a = 100;
var index = {
name: 'QB',
age: 18
};
exports.a = a;
exports["default"] = index;
Object.defineProperty(exports, '__esModule', { value: true });
}));
//# sourceMappingURL=vue.js.map
./dist/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="vue.js"></script>
<script>
console.log(Vue);
</script>
</body>
</html>