1.初始化，生成package.json文件
npm init
2.安装babel相关插件
npm install rollup rollup-plugin-babel @babel/core @babel/preset-env rollup-plugin-serve -D
3.新建文件rollup.config.js
rollup.config.js
// 引入babel/serve
import babel from 'rollup-plugin-babel';
import serve from 'rollup-plugin-serve';
export default {
input: './src/index.js', // 入口文件
output: {
// 模块化的类型
format: 'umd',
name: 'Vue', // 全局变量名
file: 'dist/umd/vue.js',
sourcemap: true
},
plugin: [
babel({
exclude: 'node_modules/**'
}),
serve({
port: 3000, // 端口号
contentBase: '',
openPage: '/index.html' // 打开的文件
})
]
}
4.新建babelrc文件(也可直接在config文件下写)、package.json中配置运行命令
.babelrc文件
{
"presets": [
"@babel/presets-env"
]
}
package.json
"scripts": {
"dev": "rollup -c -w"
},
5.测试(新建src目录并新建index.js文件，写一个fn方法)
index.js 测试方法fn
export const fn = () => {
}
6.运行命令 npm run dev
执行后会得到这些（先不管）
rollup v2.39.1
bundles ./src/index.js → dist\umd\vue.js...
created dist\umd\vue.js in 13ms
[2021-02-23 18:12:11] waiting for changes...
7.回到项目中，会多出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';
// 我们可以看到 fn 方法被打包过来了 说明测试成功了
const fn = () => {
};
exports.fn = fn;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=vue.js.map
8.测试用浏览器打开localhost:3000
新建index.html
忽略原始代码~ 写一个hello (浏览器打开localhost:3000，能否展示hello)
测试完成，能展示的~
