脚本宝典收集整理的这篇文章主要介绍了React项目搭建,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
搭建react项目的两种方法
一. 利用create-react-app (项目react-one-app)
先安装 cnpm install -g create-react-app
安装后搭建 create-react-app (项目名称不能用大写,可以用小驼峰-例如: create-react-app react-one)
缺点:
1. 搭建比较慢,网速慢的会非常的慢
2. 东西太过集成,webpack之类的包都在node_modules里边,不容易配置webpack的操作
优点:
1. 无需配置: 官方的配置,几乎完美不需要再进行修改,可以直接上手项目
2. 高集成性: 集成了React, ES6, JSX和Flow的支持
3. 自带服务: 集成了开发服务器,方便预览调试
4. 热更新: 保存自动更新
5. 全兼容性: 自动处理CSS兼容问题,无需手动添加-webkit-前缀
6. 自动发布: 集成了发布功能, 编译后直接发布, 并包含了调试的sourcemaps功能
二. 结合webpack的 generator-react-webpack (项目react-two-app)
需要先安装yeoman cnpm install -g yo
安装工具 cnpm install -g generator-react-webpack
安装后搭建
先创建文件 mkdir react-tow-react
切换 cd react-two-react
安装搭建 yo react-webpack
缺点:
1. 需要依靠yeoman安装
优点:
1. 基于webpack搭建,易于修改配置内容
2. 支持ES6,集成了Bebel-loader
3. 支持不同风格CSS(CSS,Less,Sass,Stylus)
4. 集成语法检测ESLint功能
5. 可以轻松配置单元测试
三. 利用webpack自己配置搭建React环境 (项目 react-three-app)
**没有安装cnpm的朋友可以安装下,安装配置快一些**
npm install -g cnpm --registry=https://registry.npm.taobao.org
(对webpack的详细不做过多解释在此处,对webpack不了解的朋友可以到
webpack中文网站: https://doc.webpack-china.org/concepts/
也可以到其他技术博客查看 )
1. npm inIT -y
然后创建文件,文件结构为
2. cnpm install --save-dev webpack
配置webpack.congig.js(website的地址根据自己的config配置)
此处对website的配置适用于学习,项目中应用需要配置开发模式和生产模式
3. 安装服务 cnpm install --save-dev webpack-dev-server
配置package.JSON 配置打包(npm run build)和运行(npm run dev)的执行命令
此处对的配置适用于学习,项目中应用需要配置开发模式和生产模式 (windows注意描述)
4. 配置 htML的打包
安装 cnpm install --save-dev html-webpack-plugin
配置 在webpack.congfig.js
5. 配置sass样式处理
安装 style-loader css-loader node-sass sass-loader 四个配置可以单独安装
cnpm install --save-dev style-loader css-loader node-sass sass-loader
配置 sass 在webpack.config.js 中module里边的rules
6. 配置 es6和jsx语法解析
安装 babel-core babel-loader babel-PReset-env babel-preset-react
cnpm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react
配置在webpack.config.js 中module里边的rules
新建文件并配置
7. 配置react
安装 react react-dom
cnpm install --save-dev react react-dom
这步完成后可以制作一些小dom和组件了
接下来的是对图片的打包以及css的优化
1. 配置打包背景图片(背景图片和html内部img的图片打包不一样)
安装 file-loader url-loader
cnpm install --save-dev
2. 配置打包html的img图片
安装 cnpm install --save-dev html-withimg-plugin
3. 配置CSS分离
安装 cnpm install --save-dev extract-text-webpack-plugin
4. 配置消除多余CSS
安装 purifyCSS-webpack和purify-css
/*/
yeoman 是GOOGLE和第三方开发者开发的
yeoman和bower以及Grunt成为以前有 '前端构建三剑客'
以上是脚本宝典为你收集整理的React项目搭建全部内容,希望文章能够帮你解决React项目搭建所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。