手写vue（一）环境搭建

1. 初始化项目

npm init -y

2. 安装依赖

安装rollup用于打包代码，babel语法转换等，只在开发环境中才需要的的依赖

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

3. 编写配置文件

1. 创建rollup配置文件

rollup.config.js:

// 如果打包时导入失败，查看报错信息，可以得出，需要在package.json中，设置type为module
import babel from 'rollup-plugin-babel'
// 导出对象作为打包的配置文件
export default {
    // 打包入口
    input: './src/index.js',
    // 打包结果输出
    output: {
        file: './dist/vue.js',
        name: 'Vue', // 挂载一个变量到全局上
        format: 'umd', // 输出格式
        sourcemap: true // 源码映射，方便开发时调试
    },
    plugins: [
        babel({
            exclude: 'node_modules/**'  // 语法转换时，忽略第三方依赖
        })
    ]
}

2. 编写babel配置

打包编译时会自动寻找该文件名

.babelrc:

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

4. 打包测试

1. 配置打包指令

// c表示使用配置文件，默认读取rollup.config.js
// w表示检测文件修改，实时更新
"dev": "rollup -cw"  

package.json

{
  "name": "my-vue",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "rollup -cw"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.21.0",
    "@babel/preset-env": "^7.20.2",
    "rollup": "^3.19.1",
    "rollup-plugin-babel": "^4.4.0"
  }
}

2. 编写编译目标

src/index.js

const a = 10
export {
    a
}

3. 查看打包结果

npm run dev

编写index.html导入vue.js

可在浏览器通过Vue全局对象查看内容

5. 总结

项目结构