Windows系统前端开发环境安装

作者:Kinglong    发表时间:2022-11-13 22:14   

关键词:Nodejs  WebStorm  Nginx安装  

1. 前端开发环境

1)IDE

可使用WebStorm或VSCode 进行前端项目开发。

WebStorm是jetbrains公司旗下一款JavaScript 开发工具。

VSCode是Microsoft开发的代码编辑器工具。

2)nodejs

NodeJS 是基于Chrome V8引擎的 JavaScript 运行环境。

ReactJS是用JavaScript写的库。webpack是一个运行在NodeJS 端的打包工具,react-cli都是运行在 NodeJS 环境下的脚手架。React项目的开发依赖于NodeJs这个JavaScript 运行环境。

3)前端工程化

Webpack

webpack是一个代码编译工具,一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。是node的一个第三方模块包, 用于打包代码。

前端资源构建工具:把一些浏览器不支持的文件比如less,sass,转换成浏览器支持的css。

webpack把很多文件打包整合到一起, 进行代码压缩混淆处理,缩小项目体积, 提高加载速度。

Babel

Babel 是一个 JavaScript 编译器,是一个广泛使用的转码器,把使用ES6/ES7等“高级”语法编写的Javascript代码转换为ES5/ES3的“通俗”语法(也可以把JSX语法转为Javascript),让低端运行环境(如浏览器和node )能够认识并执行。

babel 本身不具有任何转化功能,它把转化的功能都分解到一个个 plugin 里面。@babel/core Babel的核心功能包含在该模块中。@babel/cli 是一个能够从终端(命令行)便捷使用@babel/core能力的工具。--presets=@babel/env,这将告诉 @babel/cli 使用 @babel/core 结合 @babel/preset-env 预设进行代码转换

create-react-app

Create React App是一个官方支持的创建 React 单页应用的脚手架,它提供了一个零配置的现代构建设置,将一些复杂工具(比如 webpack, Babel)的配置封装了起来。

create-react-app的使用方法:

(1)安装create-react-app脚手架:npm install -g create-react-app。

(2)使用脚手架命令创建项目:create-react-app [app-name],如create-react-app react-first-app。

4)Nginx

前端项目打包后,需要部署在一个web服务器上提供访问。

Nginx是一个高性能Web和反向代理服务,也是一种轻量级的Web服务器。可以使用Nginx部署前端项目。

2. Nodejs安装配置

2.1 Nodejs官网下载

官网:https://nodejs.org/en/

下载地址:https://nodejs.org/dist/v18.12.1/node-v18.12.1-x64.msi

 

2.2 Nodejs安装

2.3 cmd窗口测试

在cmd中执行node --version查看版本。正常显示版本号,表示安装成功。

3. WebStorm安装配置

3.1 WebStorm官网下载

官网:https://www.jetbrains.com.cn/webstorm/

下载地址:https://www.jetbrains.com.cn/webstorm/download/download-thanks.html

3.2 WebStorm安装

3.3 WebStorm运行使用

勾选同意用户协议,点击continue

点击“开始试用”

注册试用的账号

 

3.4 创建项目

3.5 运行和打包

3.5.1 启动项目

项目创建完成后,生成下图红框所示目录和文件。

在Terminal窗体中执行npm start,可运行项目。

3.5.2 打包

在Terminal窗体中执行npm run build,会将应用打包到build目录下。

打包好的文件用于部署,参见3.6节部署到nginx服务器。

4. Nginx安装配置

4.1 Nginx官网下载

http://nginx.org/en/download.html

http://nginx.org/download/nginx-1.22.1.zip

4.2 Nginx安装(解压)

解压nginx-1.22.1.zip 到C:\Program Files\Nginx

4.3 Nginx配置

在nginx的配置文件是conf目录下的nginx.conf。

l 默认配置的nginx监听的端口为80。如果80端口被已占用,可将监听端口修改成其他端口(netstat -ano | findstr “80”)。

l location / 下的root,配置的是站点的目录。后续可以通过修改该目录,将站点映射到需要部署的项目所在的目录。

4.4 Nginx启动

双击nginx目录下的nginx.exe,黑色弹窗闪过,启动完成。

 

如果弹出防火墙阻止提示,点击允许访问。

4.5 浏览器测试

在浏览器输入 http://localhost,显示Welcome to nginx!等信息,即表示成功。

4.6 部署自己的应用

2.5.2节中打包在build目录的文件拷贝,覆盖Nginx的html目录下的文件。

再访问http://localhost,即可看到react项目的欢迎页面。