爱玩原神的程序猿


当你重新踏上旅途之后，一定要记得旅途本身的意义。

vue源码手写实现（一）：搭建开发环境

  • 1382 字
  • 次阅读
  1. 1. 初始化项目
  2. 2. 配置rollup
  3. 3. 打包测试

想要手写源代码，咋们需要一个打包环境，这里使用rollup打包工具。

初始化项目

初始化npm

1
npm init -y

下载rollup以及相关依赖

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

在package.json中设置运行脚本，-c代表制定rollup配置文件，-w表示即时监听js文件变化，并重新编译

1
"dev": "rollup -cw"

配置rollup

打开项目，新建一个index.js作为打包目标文件，随便写点js代码。新建一个rollup.config.js文件，并编写如下配置

1
2
3
// index.js
export const a = 10;
export default {a:1}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// rollup.config.js
// rollup默认可以导出一个对象，作为打包的配置文件
const babel = require('rollup-plugin-babel');
module.exports = {
    input: './src/index.js',// 入口
    output: {
        file: './dist/vue.js',// 出口
        name: 'Vue',// 全局变量名
        format: 'umd',// 打包格式 esm es6模块 commonjs life自执行函数 umd（commonjs和amd）透明模块规范
        sourcemap: true// 希望可以调试源代码
    },
    plugins: [
        babel({// 不论什么插件都是执行一个函数
            //可以在这里加配置，也可以配置一个rc文件
            exclude: 'node_modules/**'// 不要打包node_modules所有文件
        })
    ]
}

新建.babelrc文件，导入全部插件映射

1
2
3
4
5
6
// .babelrc
{
    "presets":[
        "@babel/preset-env"
    ]
}

打包测试

运行命令npm run dev进行打包，在dist中得到打包后的js文件和一个压缩的js文件。

在dist中建立index.html文件，引入打包好的vue.js文件，console.log可以得到Vue实例和包含的属性（index.js）。

1
2
3
4
5
6
7
// 打印结果(Vue)
{
    "a": 10,
    "default": {
        "a": 1
    }
}
本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可
,