前端环境安装

向右看齐 2023-07-13 03:54 10阅读 0赞

### 前端环境安装 ###

*  1 node.js
 *   *  1.1 下载地址
     *  1.2 安装
     *  1.3 测试
 *  2 包资源管理器NPM
 *   *  2.1 什么是NPM
     *  2.2 NPM命令
 *  3 Webpack
 *   *  3.1 什么是Webpack
     *  3.2Webpack安装

# 1 node.js #

## 1.1 下载地址 ##

https://nodejs.org/en/download/

## 1.2 安装 ##

安装默认下一步即可

## 1.3 测试 ##

在命令提示符下输入命令 node ‐v显示当前node版本

# 2 包资源管理器NPM #

## 2.1 什么是NPM ##

npm全称Node Package Manager，他是node包管理和分发工具。其实我们可以把NPM理解为前端的Maven

## 2.2 NPM命令 ##

1）初始化工程  
npm init  
2）本地安装  
npm install xxx  
3）全局安装  
npm install xxx ‐g  
例如 npm install jquery ‐g  
4）批量下载  
npm install  
此时，npm会自动下载package.json中依赖的js库.  
5）运行工程  
npm run dev  
6）编译工程  
npm run build

# 3 Webpack #

## 3.1 什么是Webpack ##

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E5NzQ5ODYwNDI_size_16_color_FFFFFF_t_70]  
从图中我们可以看出，Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。

## 3.2Webpack安装 ##

npm install webpack ‐g  
npm install webpack‐cli ‐g  
安装完成后查看版本  
webpack ‐v

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E5NzQ5ODYwNDI_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200310135153331.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E5NzQ5ODYwNDI=,size_16,color_FFFFFF,t_70