vue源码系列01_环境搭建

导包

依次使用 npm install 下载如下包

1. rollup 打包工具
2. @babel/core 用babel核心模块
3. @babel/preset-env (babel将高级语法转成低级语法)
4. rollup-plugin-babel (桥梁)
5. rollup-plugin-serve (实现静态服务)
6. cross-env (设置环境变量)

相关配置

在根目录下创建

rollup.config.js

import babel from 'rollup-plugin-babel';
import serve from 'rollup-plugin-serve';


export default{
    input: './src/index.js',
    output:{
        file: 'dist/umd/vue.js', //出口路径
        name: 'Vue', // 指定打包后的变量名字
        format: 'umd', //统一模块规范
        sourcemap: true, //es6->es5 开启源码调试，可以找到源代码报错的位置
    },
    plugins:[
        babel({
            exclude:"node_modules/**"
        }),
        process.env.ENV ==='development'?serve({
            open:true,
            openPage: '/public/index.html', //默认打开html的路径
            port:3000,
            contentBase: ''
        }):null
    ]
}

在package.json中配置

"scripts": {
    "build:dev": "rollup -c", // 直接打包
    "serve":"cross-env ENV=development rollup -c -w" // 设置环境变量 development 并且打包 -w 实时监听
 },

创建.babelrc

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

创建目录结构

在index.html下导入vue打包文件

在src下创建index.js，console.log(“测试”)一下
最后在终端里 npm run serve查看控制台即可查看是否搭建完成