怎样搭建react项目
搭建之前请确保电脑装了nodejs环境,打开cmd,输入node -v,npm -v查看即可。
1、初始化项目,安装插件
先建立一个文件夹,然后初始化 package.json
mkdir react-demo cd react-demo npm init -y //初始化package.json
然后就会发现react-dome生成一个package.json,我们安装的插件,信息都在这个文件里面。
安装相关webpack的插件
● 开始安装react的插件,首先要安装webpack的插件,我用yarn来管理插件,也可以用npm。
需要安装的插件:
1、webpack
2、webpack-cli:webpack的命令工具,既然安装webpack,就必要安装这个
3、webpack-dev-server:启动http服务
4、webpack-merge: 引用通用的配置来组合,比如开发环境的配置和生产环境的配置共用一个common.js
yarn add webpack webpack-cli webpack-dev-server webpack-merge --dev
● 安装相关react的插件
目前就安装react,react-dom
yarn add react react-dom
安装相关babel的插件
既然用react,那就需要用到babel的插件
需要的插件
1、babel-loader:文件处理器,加载js文件
2、@babel/core:最新的版本,之前是babel-core,是babel的核心功能
3、@babel/preset-env:也是最新的版本,之前是babel-preset-env。因为webpack不能识别es6以上,所以需要这个插件来转换es5
4、@babel/preset-react:也是最新的版本,之前是babel-preset-react,用来转换react的语法
yarn add babel-loader @babel/core @babel/preset-env @babel/preset-react --dev
● 安装html-webpack-plugin的插件
自动生成html文件,尤其能随着编译的变化而变化,不需要手动改变bundle.js
//安装插件 yarn add html-webpack-plugin --dev
2、配置webpack
配置webpack之前,首先要考虑怎么配置webpack,为了后面方便维护或者方便管理的,我们通常会把开发环境和生产环境分开管理,各自修改或者维护。然后我就参考这个思维,就在项目根目录下新建一个config的文件夹,然后建立三个文件,一个是通用的配置(webpack.common.js),一个是开发环境的配置(webpack.dev.js),一个是生产环境的配置(webpack.prod.js),如图下:
● 通用的配置
开发和生产环境的通用配置放到这个,比如说设置入口,出口打包
//webpack.common.js const path=require('path'); //路径的api const HtmlWebpackPlugin=require('html-webpack-plugin');//引用html-webpack-plugin module.exports={ //入口的设置 entry:{ app:'./src/index.js', //入口的文件名 }, //http服务的设置 devServer:{ //利用上面的webpack-dev-server插件 port:1234 //端口号,默认是8080,8080这个端口号很容易被占用 }, //管理资源 module:{ rules:[ { //加载js test: /\.js$/, use: 'babel-loader', exclude: /node_modules/, } ] }, //出口的设置 output:{ filename:'[name].bundle.js',//命名文件 path:path.resolve(__dirname,'../dist')//生成的位置 } }
● 开发环境的配置
//webpack.dev.js const common=require('./webpack.common.js');//引用通用配置 const merge=require('webpack-merge');//引用webpack-merge插件 module.exports=merge(common,{ mode:'development', //开发的模式 })
● 生产环境的配置
//webpack.prod.js const merge=require('webpack-merge'); const common=require('./webpack.common.js'); module.exports=merge(common,{ mode:'production' })
既然用react和es6,那就需要配置.babelrc,就在项目的根目录下新建
//.babelrc { "presets": [ "@babel/preset-env", "@babel/preset-react", ] }
我们一般用命令行来启动开发环境的运行,或者打包的。这个还要配置的,就在package.json里增加
//package.json "scripts": { "test": "echo \"Error: no test specified\" && exit 1", + "dev": "webpack-dev-server --config config/webpack.dev.js --open", //开发环境,根据config文件夹下的webpack.dev.js文件的配置,--open这个是自动开启浏览器 + "build": "webpack --config config/webpack.prod.js" //生产环境,根据config文件夹下的webpack.prod.js文件的配置 },
webpack配置差不多到此为止了。
3、开始第一个项目
首先在项目的根目录下新建public,放index.html
//index.html <!DOCTYPE html> <html> <head> <title>react demo</title> </head> <body> <div id="root"></div> </body> </html>
有没有发现,我还没引用bundle.js。然后这就需要在wbepack里配置
//webpack.common.js devServer:{ //利用上面的webpack-dev-server插件 port:1234 //端口号 }, //新增的代码块 + plugins:[ + new HtmlWebpackPlugin({ + template:'public/index.html',//指定的html模板,这个会自动帮我引用下面output出口设置的文件名。 + }) + ],
在项目的根目录下新建src文件夹,然后再新建index.js文件
//index.js import React from 'react'; import ReactDOM from 'react-dom'; ReactDOM.render( <h1>Hello React.js</h1>, document.getElementById('root'), )
应该差不多了,那就试试yarn start(package.json中的start)
yarn start
然后浏览器就会自动开启,就能看到大大的“Hello React”。
yarn build
就能看到dist的文件夹,这个是打包后的文件夹,可以看看html的代码,会发现多了一个script的引用,是html-webpack-plugin的作用。
零配置的搭建就到此为止。
更多React相关技术文章,请访问React答疑栏目进行学习!
以上就是怎样搭建react项目的详细内容,更多请关注0133技术站其它相关文章!