构建vue源码调试环境2. 增加sourcemap文件注：1. rollup的指令解释：rollupjs的source

1.下载源码

从github下载源码

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

2.安装依赖

npm i

国内的话建议使用淘宝NPM镜像去安装

npm install -g cnpm --registry=https://registry.npm.taobao.org

cnpm i

2. 增加sourcemap文件

在package.json script dev 增加--sourcemap指令

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

注：1. rollup的指令解释：rollupjs的sourcemap

运行npm run dev 打包文件生成sourcemap文件。

npm run dev

此时，dist目录下生成vue.js和vue.js.map文件

注：阮一峰老师的JavaScript Source Map 详解

3. 创建调试页面

在examples创建文件夹demo,在demo下面再新建一个index.html

<html>
    <header>
        <script src="../../dist/vue.js"></script>
    </header>
    <body>
        <div id="app"></div>
        <script>
            new Vue({
                el: '#app',
                template: '<div>Hello World</div>'
            })
        </script>
    </body>
</html>

完成

到这一步，本地调试环境就可以了，直接用google打开这个index.html就可以了。愉快的玩耍吧。

vue源码解析推荐文章

Vue.js 技术揭秘
vue-design-逐行级别的源码分析
- 代码下载之后切换到elegant分支：逐行级别的源码分析

参考文章：

vue源码分析系列:用sourcemap调试源码