配置React项目的运行环境

两种配置react项目运行环境的方法

第一种方法，一步步配置项目的运行环境：
1）下载node，在官方网站可以下载，安装步骤不难，差不多一步步意
点next就行；
2）运行cmd 输入node -v npm -v两行命令检查是否安装成功；
3）接下来在cmd下输入npm install -g webpack (最好使用cnpm命令进行下载，快一点)，全局安装webpack打包软件；
4）然后输入npm install -g webpack-cli 全局安装webpack-cli脚手架；
5）接下来安装webpack-dev-server,介绍一下这个是什么webpack-dev-server是一个小型的Node.js Express服务器，注意知识点：“服务器，可以将我们打包好的工程项目运行在浏览器上，在终端输入
npm install webpack-dev-server就可以完成下载；
6）安装html-webpack-plugin插件，加快浏览器的访问速度，使用html-webpack-plugin插件来启动页面可将html页面放入内存以提升页面的加载速度 ,并且还能自动设置index.html页面中JS文件引入的路径,(安装好插件后得在webpack-config-js中进行配置）

var htmlWebpackPlugin = require('html-webpack-plugin')const path = require('path')
module.exports = {entry: './src/script/main.js',output: {filename: 'js/bundle.js',path: path.resolve(__dirname, 'dist')},plugins: [new htmlWebpackPlugin({filename: 'index.html',template: 'index.html',inject: 'head'})]
}

根据自己项目中的文件路径来配置；
7）上面安装的都是关于项目的，方便我们对项目的操作。接下来将要安装我们编写项目的框架react。
打开终端输入npm install react 安装react组件；
然后输入npm install react-dom 安装react虚拟dom；

通过上面的步骤已经完成了初步react项目环境的搭建。在终端输入npm run dev就可以看见自己的项目运行效果图。如果后续项目还有什么功能需求，可以通过npm进行安装。

注释：方法只讲了大致的步骤，有一些细小的代码编写就没有细说！

第二种方法，这种方法就是在第一种方法上面的浓缩，封装。
1）第一步还是一样安装node 并检查是否安装成功，这里就不细说了；
2）打开cmd全局安装react项目搭建脚手架；输入npm install -g creacte-react-app命令（等待时间可能有点久）；
3）然后在cmd中输入creacte-react-app 项目名（注意项目名的命名规范）
4）在编译器终端中输入npm start运行程序即可；

参考文献：用脚手架搭建react项目

总结：第一种方法虽然步骤繁多，但是可以一步步让我们理解项目环境的搭建过程，便于理解；第二种方法，优点在于便捷，一两步就可以解决，但是对于初学者来说不能理解所搭建的项目的构成。

配置React项目的运行环境相关推荐

win7和win2008 r2下配置IIS7(ASP.net运行环境)
win7和win2008 r2下配置IIS7(ASP.net运行环境) 1.先要设置应用程序池(ApplicationPool)为Classic.NETAppPool,而不是默认的DefaultApp ...
java applet配置_配置Java Applet的运行环境
Java小程序,也就是Java Applet,可以在Web浏览器中运行.Java Applet必须以脚本的形式嵌入到HTML页面中,才能在web浏览器中运行. 之前总以为本地安装了JDK,指定好JAV ...
Ubuntu 18.04配置ORB-SLAM2和ORB-SLAM3运行环境+ROS实时运行ORB-SLAM2+SLAM相关库的安装
文章目录一.换源二.安装三方库 2.1 安装必要的依赖项 2.2 安装Pangolin 2.3 安装OpenCV3 2.4 安装Eigen3 三.安装ORB-SLAM2 四.安装ORB-SLAM3 ...
java applet怎么运行_配置Java Applet的运行环境
Java小程序,也就是Java Applet,可以在Web浏览器中运行.Java Applet必须以脚本的形式嵌入到HTML页面中,才能在web浏览器中运行. 之前总以为本地安装了JDK,指定好JAV ...
Ubuntu配置多版本Python运行环境
Ubuntu配置多版本Python运行环境环境操作系统 Ubuntu 18.04.6 LTS (Bionic Beaver) 内容机器已有python 3.6,再增加python 3.9,当运行 ...
React项目搭建及环境配置
React 脚手架 create-react-app 为了快速地进行构建使用 React 的项目,FaceBook 官方发布了一个无需配置的.用于快速构建开发环境的脚手架工具 create-react ...
Disconf介绍，源码下载，环境准备，安装，disconf-web使用和配置介绍，项目中进行配置，项目案例运行
1.disconf介绍 Distributed Configuration Management Platform(分布式配置管理平台)专注于各种分布式系统配置管理的通用组件 / 通用平台,提供统 ...
lua qt 编译_Win32下 Qt与Lua交互使用（一）：配置Qt下Lua运行环境
偶然间看到Lua这种脚本语言,有点兴趣,简单学习了一下.html 发现Lua与C++之间能够实现很是强的交互性.Lua中能够使用C++中的函数,C++中也能够使用Lua中的函数.由此能够引起出不少奇思 ...
react项目如何运行
入门react时,最烦的就是配置各种依赖,不管是你从网上down的别人的代码还是你自己的代码换个工作目录运行,都会发现运行不起来. 解决办法是,移动react项目时不要把node_modules一同复 ...

配置React项目的运行环境

两种配置react项目运行环境的方法

配置React项目的运行环境相关推荐

最新文章

热门文章