RollUp搭建vue开发环境

• 安装依赖

1. 新建项目文件夹

2. 初始化
   npm init -y

3. 安装依赖
   npm install @babel/preset-env @babel/core rollup rollup-plugin-babel rollup-plugin-serve cross-env -D

• 打包文件配置

4. 新建src目录

5. 新建入口文件
   src -> index.js

export default function Vue() {
  
}

6. 配置rollup
   新建rollup.config.js

// 引入babel
import bable from 'rollup-plugin-babel'
import serve from 'rollup-plugin-serve'

export default {
  input: './src/index.js', // 配置一个打包的入口文件
  output: {
    file: 'dist/vue.js', // 打包出口文件
    format: 'umd',  // 打包分模块 'umd'一种打包方法一种模型一种模式。'umd' 可以在windows上面
    name: 'Vue', // 全局变量的名称
    sourcemap: 'true' // 将转换前后的代码进行映射
  },// 配置一个出口文件
  plugins: [ // 放插件
    bable({  // 转换高级语法
      exclude: 'node_modules/**'  // 排除文件夹
    }),
    serve({ // 开启一个服务
      port: 3000, // 端口号
      contentBase:'', // 写个内容的基准 '' 表示当前目录
      openPage: '/index.html' // 服务打开的文件
    })
  ]
}

7. 在根目录下新建入口文件 index.html

8. 新建babelrc文件

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

9. 配置执行命令打开package.json修改scripts
   // -c表示执行配置文件 -w表示检测更新
   "scripts": { "dev": "rollup -c" // -c表示执行配置文件 -w表示检测更新 },

• 执行命令

10. 执行npm run dev 判断是否成功