1、初始化项目
npm init -y
此时，生成一个package.json文件，主要用于项目的配置信息，包括名称、版本、描述信息等， 也会记录项目所需的各种模块，包括了生产依赖，和开发依赖，以及script脚本信息。
类似于：
//package.json
{
"name": "mselfvue",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "xxx"
},
"keywords": [],
"author": "",
"license": "ISC"
}
2、安装依赖
npm istall rollup rollup-plugin-babel @babel/core @babel/preset-env --save-dev
//rollup : 打包工具
//rollup-plugin-babel:在rollup 中使用babel 插件
//@babel/core : babel的核心块
//@babel/preset-ev : babel预设 高级语法转低级
3、编写预设文件
// .babelrc
{
"presets":[
"@babel/preset-env"
]
}
4、编写rollup.config.js文件
此文件为rollup打包时的默认配置文件
//rollup.config.js rollup 导出一个对象，作为打包的配置文件
import babel from "rollup-plugin-babel"; //引入babel
export default {
input :"./src/index.js",//打包入口文件
output:{
file:"./dist/vue.js",//打包出口文件
name:"Vue",
format:"umd", //amd: 异步模块定义。
//cjs: CommonJS,适用于Node。
//es: 将软件包保存为ES模块文件。
//iife: 一个自动执行的功能，适合作为script标签这样的，只能在浏览器中运行。
// umd: 通用模块定义，以amd、cjs和iife为一体。
sourcemap:true, //调试源代码工具
},
plugins:[
babel({
exclude:"node_modules/**", // 不去编译 node_modules下的文件夹
})
]
}
5、更改package.json 中的script脚本命令
...
"scripts": {
"start": "rollup -cw" //执行 npm run start 执行打包 w:--watch 监听源文件改动，重新打包
},
...
此时，package.json的文件长这样:
{
"name": "mselfvue",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "rollup -cw"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.16.12",
"@babel/preset-env": "^7.16.11",
"rollup": "^2.66.0",
"rollup-plugin-babel": "^4.4.0"
}
}
6、配置完成 做一次试验
- 创建入口文件 ./src/index.js
export const a = 1;
- 执行打包命令
$ npm run start
> mselfvue@1.0.0 start
> rollup -cw
rollup v2.66.0
bundles ./src/index.js → dist\vue.js...
(!) Generated an empty chunk
index
created dist\vue.js in 5.5s
bundles ./src/index.js → dist\vue.js...
created dist\vue.js in 62ms
Reloading updated config...
bundles ./src/index.js → dist\vue.js...
- 此时完成打包 在生成一个 dist目录 包含一个 .js文件 和一个 .js.map 文件
