脚本宝典收集整理的这篇文章主要介绍了

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 
    然后创建文件,文件结构为        

clipboard.png

    
2. cnpm install --save-dev webpack
    配置webpack.congig.js(website的地址根据自己的config配置)                

clipboard.png

     此处对website的配置适用于学习,项目中应用需要配置开发模式和生产模式          
   

clipboard.png

3. 安装服务 cnpm install --save-dev webpack-dev-server
    配置package.json 配置打包(npm run build)和运行(npm run dev)的执行命令
    

clipboard.png

     此处对的配置适用于学习,项目中应用需要配置开发模式和生产模式 (windows注意描述)  
   

clipboard.png


4. 配置 html的打包
      安装 cnpm install --save-dev html-webpack-plugin
      配置 在webpack.congfig.js                  

clipboard.png

      
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               
   

clipboard.png

 
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       
  

clipboard.png

    
   新建文件并配置        
   

clipboard.png


 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群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过