一、结构梳理:
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()
if (err) throw err
// 在编译完成的回调函数中,在终端输出编译的文件
process.stdout.write(stats.toString({
colors: tru