vue源码学习（二）

一、结构梳理：
vue的源码在src目录下，基本结构如下：

二、源码构建（非纯vue，实际为vue+webpack，正好在用，就一起做代码梳理了）：
vue的源码是基于rollup构建的（js模块打包器），构建配置在scripts目录下。
1、package.json：
npm执行脚本在script字段里配置。
eg:

"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js"
}

可以看出是执行了node build/build.js
贴一下我的build.js文件，一条一条的梳理清楚写了注释（不是纯vue，有一部分webpack的配置，会稍微复杂一点点）

'use strict'//严格模式
require('./check-versions')()//版本验证工具

process.env.NODE_ENV = 'production'//node环境变量

const ora = require('ora')//loading效果
const rm = require('rimraf')//轻量级的为js适配的orm，对象映射
const path = require('path')//路径配置
const chalk = require('chalk')//颜色插件
const webpack = require('webpack')//引入webpack
const config = require('../config')//配置文件
const webpackConfig = require('./webpack.prod.conf')//webpack配置文件

const spinner = ora('building for production...')
spinner.start()//启用loading效果

// 删除已编译文件
// @assetsRoot：指向包含应用程序的所有静态资产的根目录，绝对路径
// @assetsSubDirectory：被webpack编译处理过的资源文件都会在这个目录下
rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
if (err) throw err
//在删除完成的回调函数中开始编译
webpack(webpackConfig, (err, stats) => {
spinner.stop()