Windows系统前端开发环境安装
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/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项目的欢迎页面。