vue2源码学习01配置rollup打包环境

最新推荐文章于 2024-07-12 16:55:56 发布

Z编程

最新推荐文章于 2024-07-12 16:55:56 发布

阅读量458

点赞数 4

分类专栏： vue2源码教程文章标签：前端 javascript vue

本文链接：https://blog.csdn.net/weixin_45636198/article/details/136915689

版权

vue2源码教程专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.下载rollup相关依赖

npm i rollup rollup-plugin-babel @babel/core @babel/preset-env --save-dev

2.新建rollup.config.js配置打包选项

//rollup可以导出一个对象，作为打包的配置文件
import babel from 'rollup-plugin-babel'
export default {
    input: './src/index.js',//入口
    output: {
        file: './dist/vue.js',//出口
        name: 'Vue',//global.Vue
        format: 'umd',//esm es6 commonjs模块 iife自执行函数 umd统一模块规范(comon js & amd)
        sourcemap: true,//希望可以调试源代码
    },
    plugins: [
        babel(
            {
                exclude: 'node_moudules/**'//排除依赖的模块
            }
        )
    ]
}

3.新建.babelrc文件配置babel

{
    "presets": [
        "@babel/preset-env"
    ]
}

4.修改package.json文件，配置启动脚本

{
  "name": "y",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "rollup -cw"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.23.3",
    "@babel/preset-env": "^7.23.3",
    "rollup": "^2.79.1",
    "rollup-plugin-babel": "^4.4.0"
  }
}