第一种 使用脚手架工程Create React App
Create React App基于最佳实践,将Webpack、Babel、ESlint等工具的配置做了封装,使用时无需进行配置工作,可以专注于开发
1.安装: 肯定要先安装node和npm,然后安装create-react-app到系统全局环境,(方便在任意路径使用)
npm install -g create-react-app
2.创建应用
create-react-app my-app
这样就会在当前路径下创建一个my-app的React应用
3.运行项目
cd my-app
npm start
目录结构大概长这样
其中 node_modules文件夹是安装的所有依赖模块;package.json定义了项目的基本信息,如项目名称、版本号、在该项目下可执行的命令以及项目依赖的模块等;public下的index.html是应用入口页面;src是项目源码,index.js是代码入口
第二种 自己使用Webpack和Babel等搭建React应用
npm init -y //快速创立一个包管理配置文件
新建目录src 源代码目录 和 dist产品目录
在src下创建一个index.html和index.js
npm install webpack webpack-cli -D //安装webpack 4.x版本需要cli(脚手架)
webpack.config.js //新建配置文件
module.exports= {
mode:'development', //或production 4.x新增的mode为必选项
//4.x约定大于配置,默认打包入口src-->index.js,打包输出文件是dist中main.js,就不需要配置entry
}
//配置实时打包
npm install webpack-dev-server -D
修改package.json -->scripts -->添加 "dev" : "webpack-dev-server"
npm run dev //实时打包
index.html 引入<script src="/main.js"></script>
修改"dev":"webpack-dev-server --open --port 3000 --hot --progress --compress --host 127.0.0.1" //打包后打开默认浏览器 指定域名端口号 进度 压缩
//将index.html也托管于浏览器内存中
npm install html-webpack-plugin -D 加载插件
在webpack.config.js中
const Path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const htmlWebpackPlugin = new HtmlWebpackPlugin({
template: Path.join(__dirname,'./src/index.html'),//源文件
filename: 'index.html'//生成的内存中首页的名称
})
//在module中添加
plugin:[
htmlPlugin
]
//webpack就配完了
//配置babel
//安装插件
npm install babel-core babel-loader babel-plugin-transform-runtime -D
npm install babel-preset-env babel-preset-stage-0 -D
//安装能够识别jsx语法的包
npm abel-preset-react -D
//配置loader 在webpack.config.js-->module.exports中添加
module:{//所有第三方模块的处理规则
rules:[
{test:/\.js|jsx$/,use:'babel-loader',exclude:/node_modules/}
]
}
//在根目录添加.babelrc文件
{"preset":["env","stage-0","react"],
"plugins":["transform-runtime"]}
//创建react应用
npm install react react-dom -S //安装包
//可以配置省略文件后缀名和@路径标识符,在webpack.config.js-->module.exports中与module平级添加
resolve:{
extensions:['.js','jsx','json'],
alias:{
'@':Path.join(__dirname, './src')
}
}
//配置css loader
npm install style-loader css-loader -D
npm install sass-loader node-loader -D
//在rules中添加
{test:/\.scss$/,use:['style-loader', 'css-loader?modules']} //将自定义样式表以.scss命名,方便模块化,第三方样式表就用.css不用被模块化(只针对类选择器和 id选择器)
{test:/\.css$/,use:['style-loader', 'css-loader']}
//可以自定义类名格式
//在rules的css-loader后添加
{test:/\.scss$/,use:['style-loader','css-loader?modules&localIdentName=[path][name]-[local]-[hash:5]','sass-loader']}
//[path]:样式表相对于项目根目录所在路径
//[name]:样式表文件名称
//[local]:样式的类名定义名称
//[hash:length]:表示32位的hash值
//在样式表中可以使用:local或:global +(类名)来设置该类是否被模块化
//使用bootstrap
npm install bootstrap@版本号 -S
npm install url-loader file-loader -D
//在rules中添加
{test:/\.ttf|woff|soff2|eot|svg$/,use:'url-loader'}