npm run build --report

时间: 2023-02-07 16:50:40 浏览: 123

vue-cli系列之vue-cli-service整体架构浅析

在探讨Vue-CLI服务的核心组件vue-cli-service的整体架构之前，我们先了解Vue-CLI。Vue-CLI是一个基于Vue.js进行快速开发的完整系统，它提供了终端中友好的脚手架，允许开发者快速搭建项目模板。vue-cli-service是这个系统中的一个核心组件，它负责处理所有与构建配置相关的工作。 ### 关于vue-cli-service vue-cli-service提供了一些命令，比如我们常用的`npm run serve`来启动开发服务器，`npm run build`来进行生产环境的构建。这些命令是通过vue-cli-service服务来运行的，它内部使用了Webpack作为其默认的构建工具。 ### vue-cli-service的运行机制在执行`npm run serve`时，实际上是在调用vue-cli-service的`serve`命令。它首先会执行一系列检查，确保当前Node.js版本符合Vue-CLI的要求。如果不满足，则会打印出错误信息并终止启动过程。 #### Node.js版本检查在`vue-cli-service.js`文件中，可以看到对当前Node.js版本的检查代码。它使用`semver`包来检查当前Node.js版本是否符合`package.json`中声明的版本。如果不满足，将会输出错误信息并退出程序。 ```javascript const semver = require('semver'); const requiredVersion = require('../package.json').engines.node; if (!semver.satisfies(process.version, requiredVersion)) { error( `You are using Node ${process.version}, but vue-cli-service ` + `requires Node ${requiredVersion}.\nPlease upgrade your Node version.`); process.exit(1); } ``` #### vue-cli-service实例化在Node.js版本检查无误后，vue-cli-service会实例化Service类。实例化时，它会接受一个上下文参数，这个上下文通常是项目根路径，可以通过`process.cwd()`获得。 ```javascript const service = new Service(process.env.VUE_CLI_CONTEXT || process.cwd()); ``` #### 参数处理在创建Service实例后，程序会处理命令行传入的参数。这里使用了`minimist`库来解析参数，并将其转换为布尔值等。 ```javascript const rawArgv = process.argv.slice(2); const args = require('minimist')(rawArgv, { boolean: [ // build 'modern', 'report', 'report-json', 'watch', // serve 'open', 'copy', 'https', // inspect 'verbose' ] }); const command = args._[0]; ``` #### 运行Service实例一旦参数被正确处理，程序会调用Service实例的`run`方法，并将命令名称和参数传递给它。如果运行的是`serve`命令，那么`command`将会是`serve`。 ```javascript service.run(command, args, rawArgv).catch(err => { error(err); process.exit(1); }); ``` ### Service类的内部逻辑 `Service`类是vue-cli-service的核心，负责协调整个构建过程。其构造函数接受项目上下文、插件、包信息等参数。它还负责加载环境变量、初始化Webpack配置、注册插件等。 ### Webpack配置 vue-cli-service内部使用了Webpack，这意味它也需要处理Webpack配置的问题。配置被存储在`webpack-chain`的实例中，提供了链式调用的API，使得修改配置变得更为直观和容易。 ### 插件系统 vue-cli-service允许通过插件来扩展其功能。它使用`PluginAPI`类来管理插件。每个插件被赋予`PluginAPI`实例，这个实例提供了访问内部服务的接口。 ### 总结通过上述内容，我们可以看到vue-cli-service提供了一个强大而灵活的架构，使得Vue项目开发更加高效。它在内部使用Node.js和Webpack，同时提供了一个插件系统来扩展功能。开发者可以通过配置和插件来实现各种构建需求。对于理解Vue项目构建过程和配置优化，熟悉vue-cli-service是必不可少的。

这个命令会让 npm 运行你在 package.json 文件中的 "build" script，并且会生成一份构建报告。这份报告可以帮助你更好地理解构建过程中发生了什么，如果有任何问题，这份报告也可以帮助你进行调试。

阅读全文

npm run build --report

相关推荐

实时聊天工具webchat：基于Vue和Java的浏览器端应用

escm-vuejs2: 电调组件的Vue.js 2实现与应用

npm run build:stage还是npm run build:prod

npm run build:app-plus

npm run build

vue-cli-service build与npm run build区别

vue npm run build

npm run build原理

npm run build打包配置

npm run build:h5

npm run build怎么使用

npm run build:rm

npm run build如何理解

npm run build:test

执行npm run build报错

To create a production build, run npm run build.

npm run build页面是死的

npm-chess-engine

Note that the development build is not optimized. To create a production build, run npm run build.

最新推荐

ta-lib-0.5.1-cp312-cp312-win32.whl

全国江河水系图层shp文件包下载

管理建模和仿真的文件

Keras模型压缩与优化：减小模型尺寸与提升推理速度

MTK 6229 BB芯片在手机中有哪些核心功能，OTG支持、Wi-Fi支持和RTC晶振是如何实现的？

点云二值化测试数据集的详细解读

"互动学习：行动中的多样性与论文攻读经历"

Keras正则化技术应用：L1_L2与Dropout的深入理解

在Python中使用xarray和cfgrib库处理GRIB数据时，如何有效解决遇到的DatasetBuildError错误？

JDiskCat：跨平台开源磁盘目录工具