【前端知识】基于node的前端项目构建

前端多环境版本构建

- 概述
- - 一、项目结构参数
  - 二、配置文件参数
  - 三、依赖管理参数
  - 四、构建工具参数
  - 五、其他参数
- 多环境构建
- - 一、`--mode`参数的作用
  - 二、如何使用`--mode`参数
  - 三、注意事项
- npm命令行详解
- 相关文献

概述

前端项目构建参数涉及多个方面，包括项目结构、配置文件、依赖管理、构建工具等。以下是对前端项目构建参数的详细说明：

一、项目结构参数

src：源代码目录，通常包含项目的所有前端代码，如JavaScript、CSS、HTML等。
- assets：静态资源存放目录，如图片、字体、样式文件等。
- components：公共组件存放目录，如按钮、输入框、表格等可复用的UI组件。
- views：页面视图目录，存放不同页面的模板文件。
- router：路由配置文件，定义前端页面的路由规则。
- store：状态管理库（如Vuex）的配置文件，用于管理全局状态。
public：公共文件目录，通常存放一些不需要经过构建处理的文件，如favicon.ico、robots.txt等。
config：配置文件目录，通常包含一些与构建、开发相关的配置文件，如webpack.config.js、vue.config.js等。

二、配置文件参数

package.json：项目的配置文件，包含项目的依赖信息、脚本命令等。
- dependencies：项目所需的依赖包列表。
- devDependencies：项目开发所需的依赖包列表，这些依赖包在生产环境中不需要。
- scripts：自定义脚本命令，如启动开发服务器、构建生产环境代码等。
vue.config.js（Vue CLI项目）：Vue CLI的配置文件，用于自定义Vue项目的构建行为。
- transpileDependencies：需要转译的依赖包列表。
- devServer：开发服务器的配置选项，如端口号、代理设置等。
- chainWebpack：通过链式操作自定义webpack配置。
webpack.config.js（Webpack项目）：Webpack的配置文件，用于定义项目的构建流程。
- entry：项目的入口文件。
- output：构建后文件的输出目录和文件名。
- module：定义如何处理不同类型的文件，如JavaScript、CSS、图片等。
- plugins：用于执行范围更广的任务的插件列表，如压缩代码、生成HTML文件等。

三、依赖管理参数

前端项目通常使用npm（Node Package Manager）或yarn作为依赖管理工具。这些工具允许你安装、更新和删除项目所需的依赖包。

npm：
- install：安装依赖包。
- update：更新依赖包到最新版本。
- uninstall：删除依赖包。
yarn：
- add：添加依赖包。
- upgrade：更新依赖包到最新版本。
- remove：删除依赖包。

四、构建工具参数

前端项目构建通常使用Webpack、Vite等构建工具。这些工具允许你自动化地打包、压缩和优化前端代码。

Webpack：
- mode：构建模式，可以是"development"或"production"。
- devtool：用于控制如何生成source map，以便在调试时能够定位到原始源代码。
- optimization：用于定义代码分割、压缩等优化选项。
Vite：
- root：项目根目录。
- base：开发服务器的基础路径。
- build：构建配置选项，如输出目录、压缩代码等。

五、其他参数

端口号：开发服务器监听的端口号，可以通过配置vue.config.js或webpack.config.js中的devServer选项来设置。
代理设置：当开发服务器和后端服务器不在同一个域名下时，可以通过配置代理来解决跨域问题。
环境变量：可以通过定义环境变量来区分开发环境、测试环境和生产环境，从而在构建时根据不同的环境执行不同的代码或配置。

多环境构建

总之，前端项目构建参数涉及多个方面，需要根据项目的具体需求和构建工具来选择合适的参数进行配置。在配置过程中，建议遵循“约定大于规范”的原则，以确保项目的可维护性和可扩展性。
在前端开发中，特别是使用Vue CLI等工具时，多环境包构建是一个常见的需求。--mode参数在这个过程中起到了关键作用，它允许开发者为不同的构
建环境指定不同的配置。以下是对前端多环境包构建中使用--mode的详细解释：

一、`--mode`参数的作用

--mode参数用于指定Vue CLI构建时的模式。不同的模式可以对应不同的环境变量和配置，从而实现多环境构建。例如，可以创建开发环境、测试环境和生产环境等不同的构建模式。

二、如何使用`--mode`参数

在package.json中配置脚本：

首先，需要在项目的package.json文件中为不同的构建环境配置脚本。例如：
```
"scripts": {"serve:dev": "vue-cli-service serve --mode dev","serve:prod": "vue-cli-service serve --mode prod","build:dev": "vue-cli-service build --mode dev","build:prod": "vue-cli-service build --mode prod"
}
```
这样，就可以通过运行npm run serve:dev、npm run serve:prod、npm run build:dev和npm run build:prod等命令来启动或构建不同环境的项目。
创建环境配置文件：

接下来，需要在项目根目录下创建对应的环境配置文件。这些文件通常以.env.为前缀，后跟模式名称。例如，.env.dev用于开发环境，.env.prod用于生产环境。在这些文件中，可以定义不同的环境变量。例如：
```
# .env.dev
NODE_ENV='development'
VUE_APP_API_URL='http://dev.api.example.com'# .env.prod
NODE_ENV='production'
VUE_APP_API_URL='http://prod.api.example.com'
```
在代码中使用环境变量：

在Vue项目的代码中，可以通过process.env来访问这些环境变量。例如，可以在main.js或组件中打印当前的环境变量：
```
console.log(process.env.NODE_ENV);
console.log(process.env.VUE_APP_API_URL);
```

三、注意事项

环境变量的命名：

在环境配置文件中，环境变量的命名需要遵循一定的规则。NODE_ENV和BASE_URL是Vue CLI内置的环境变量，可以直接使用。自定义的环境变量需要以VUE_APP_为前缀，否则在构建过程中可能会被忽略。
环境变量的合并：

在构建过程中，Vue CLI会将.env文件和对应模式的环境配置文件（如.env.dev、.env.prod）合并。如果两个文件中定义了相同的环境变量，则以模式环境配置文件中的值为准。
跨平台兼容性：

为了确保环境变量在不同操作系统上的兼容性，建议使用cross-env等工具来设置环境变量。这样可以避免在Windows和macOS等操作系统上因环境变量设置方式的不同而导致的问题。