Vue系列---源碼調試(二)

我們要對Vue源碼進行分析，首先我們需要能夠對vue源碼進行調式(這里的源碼調式是ES6版本的，不是打包后的代碼)，因此首先我們要去官方github上克隆一份vue項目下來，如下具體操作：

1. clone vue項目

git clone https://github.com/vuejs/vue.git

2. 下載依賴包

npm install

下載完后包，我們把視線轉移到package.json文件中的scripts來，如下打包命令：

"scripts": {
  "dev": "rollup -w -c scripts/config.js --environment TARGET:web-full-dev"
},

這邊我們最關注的是 "dev" 這個打包命令，它是使用rollup進行打包的，我們只需要在命令后面加入 --sourcemap 即可，比如如下

"dev": "rollup -w -c scripts/config.js --environment TARGET:web-full-dev --sourcemap",

那么這樣的話，當我們執行命令 npm run dev 打包時，會在我們的 dist 文件夾下 生成 vue.js.map 文件。

然后我們把視線轉移到項目中的 examples/commit/index.html 來，把頁面引入的 <script src="../../dist/vue.min.js"></script> 改成 <script src="../../dist/vue.js"></script> 即可，這樣當我們繼續 執行命令 npm run dev 后，然后我們在本地打開該頁面，我們就會看到如下源碼了，如下所示：

這樣我們就可以對源碼進行調試了。