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查看控制檯即可查看是否搭建完成