vue-cli脚⼿架build⽬录中的build.js配置⽂件
本⽂系统讲解vue-cli脚⼿架build⽬录中的build.js配置⽂件
1. 这个配置⽂件是命令npm run build 的⼊⼝配置⽂件,主要⽤于⽣产环境
2. 由于这是⼀个系统的配置⽂件,将涉及很多的模块和插件,所以这部分内容我将分多个⽂章讲解,请关注我博客的其他⽂章
3. 关于注释
当涉及到较复杂的解释我将通过标识的⽅式(如(1))将解释写到单独的注释模块,请⾃⾏查看
4. 上代码
// 写在前⾯
// 此⽂件是在node环境中运⾏的,使⽤webpack的nodejsAPI实现⾃定义构建和开发流程的
// ---------------------
// npm和node版本检查,请看我的check-versions配置⽂件解释⽂章
require('./check-versions')()
// 设置环境变量为production
// ora是⼀个命令⾏转圈圈动画插件,好看⽤的
var ora = require('ora')
// rimraf插件是⽤来执⾏UNIX命令rm和-rf的⽤来删除⽂件夹和⽂件,清空旧的⽂件
var rm = require('rimraf')
// node.js路径模块
var path = require('path')
// chalk插件,⽤来在命令⾏中输⼊不同颜⾊的⽂字
var chalk = require('chalk')
/
/ 引⼊webpack模块使⽤内置插件和webpack⽅法
var webpack = require('webpack')
// 引⼊config下的index.js配置⽂件,此配置⽂件我之前介绍了请⾃⾏查阅,主要配置的是⼀些通⽤的选项
var config = require('../config')
// 下⾯是⽣产模式的webpack配置⽂件,请看我的f解释⽂章
var webpackConfig = require('./f')
// 开启转圈圈动画
var spinner = ora('building ')
spinner.start()
// 调⽤rm⽅法,第⼀个参数的结果就是 dist/static,表⽰删除这个路径下⾯的所有⽂件
rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
// 如果删除的过程中出现错误,就抛出这个错误,同时程序终⽌
if (err) throw err
// 没有错误,就执⾏webpack编译
webpack(webpackConfig, function (err, stats) {
// 这个回调函数是webpack编译过程中执⾏
spinner.stop() // 停⽌转圈圈动画
if (err) throw err // 如果有错误就抛出错误
// 没有错误就执⾏下⾯的代码,process.stdout.write和console.log类似,输出对象
process.stdout.String({
// stats对象中保存着编译过程中的各种消息
colors: true, // 增加控制台颜⾊开关
modules: false, // 不增加内置模块信息
children: false, // 不增加⼦级信息
chunks: false, // 允许较少的输出
chunkModules: false // 不将内置模块的信息加到包信息
}) + '\n\n')
// 以上就是在编译过程中,持续打印消息
// 下⾯是编译成功的消息
console.an(' Build complete.\n'))
console.llow(
' Tip: built files are meant to be served over an HTTP server.\n' +
' Opening index.html over file:// won\'t work.\n'
)
)
})
js文字动画特效})
// end
// 注: 如果你想⾃⼰编写⼀个⾼质量的脚⼿架⼯具,建议你:
// 去补习nodejs,然后补习 es6,然后再来看webpack官⽅⽂档,然后⾃⼰独⽴编写⼀个和vue-cli类似的脚⼿架,如果上⾯的东西看不懂,更要这样做
// vue-cli还有⼀部分内容是关于代码测试的,可以说这块内容的复杂度不亚于webpack,这些内容对nodejs要求⽐较熟悉,说⽩了就是基础弱的很难⼊门,但是测试这块内容也是⾮常有价值的,可以借助
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论