用yeoman搭建react画廊项目笔记

  • Z时代
  • 2024-01-10
  • 分类：综合

react

1、安装yeoman  

npm install yo -g

yo --version 　　　//检测 yeoman版本，成功显示版本号，则安装成功　

2、到yeoman官网　http://yeoman.io/generators/　搜索寻找项目生成器（基于react和webpack构建的项目）

选择　[ react-webpack ]　项目，打开链接如下：

https://github.com/react-webpack-generators/generator-react-webpack#readme

安装generator：npm install -g generator-react-webpack

通过查看电脑最顶部环境安装了哪些全局包来查看generator-react-webpack是否安装成功：npm list --depth=0 -g

3、在自已的github上建一个项目（gallery-by-react）

项目新建时选择 MIT License，然后创建

4、安装好Git，（自行百度谷歌下载安装）

5、用git把github上刚建的项目clone下来

找到自己管理项目的文件夹，然后执行以下clone命令：

git clone https://github.com/zoujian3820/gallery-by-react.git

进入项目文件夹中：cd gallery-by-react

用generator-react-webpack来生成我们的项目：yo react-webpack gallery-by-react 

选用SASS预处理语言，选用默认 .js 文件，然后等待项目安装-　-　-　-

安装成功后，直接：npm run start　把项目跑起来

 6、安装react谷歌调试工具

推荐QQ浏览器，在应用商店中直接搜索React Developer Tools 　然后添加工具插件

7、安装stylus

由于安装sass-loader和node-sass一直安装不成功（欲哭无泪），so 选择了更方便的stylus

在package.json中添加以下依赖 --- npm install

"stylus": "0.54.5",
"stylus-loader": "^2.5.1"

8、安装autoprefixer + postcss-loader

(由于autoprefixer－loader已经被webpack废弃，已经推荐使用autoprefixer + postcss-loader的方式)　最坑爹的地方//(ㄒoㄒ)// 流泪中... 

在package.json中添加以下依赖--- npm install

"autoprefixer": "^7.1.6",
"postcss-loader": "^2.0.8"

9、修改webpack配置

本包由于用react-webpack建的（官方好久都没更新了），用的是webpack1.15.0的版本（有点小郁闷，导致跟现在webpack脱轨，很多配置不一样）

http://yeoman.io/generators/　搜索react-webpack，就下面链接这货：https://github.com/react-webpack-generators/generator-react-webpack#readme

如上图，这是项目的总体结构

一、defaults.js是我们要修改webpack配置的文件：

在其中找到函数getDefaultModules，然后loader中添加　!postcss-loader　如下，是已经添加好了的

function getDefaultModules() {
  return {
    preLoaders: [
      {
        test: /\.(js|jsx)$/,
        include: srcPath,
        loader: 'eslint-loader'
      }
    ],
    loaders: [
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader!postcss-loader'
      },
      {
        test: /\.styl/,
        loader: 'style-loader!css-loader!postcss-loader!stylus-loader'
      },
      {
        test: /\.(png|jpg|gif|woff|woff2)$/,
        loader: 'url-loader?limit=8192'
      },
      {
        test: /\.(mp4|ogg|svg)$/,
        loader: 'file-loader'
      }
    ]
  };
}

二、引入autoprefixer

在根目录下新建一个名称为postcss.config.js的js文件，如上图所示

然后在其中添加如下这段代码：

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}

三、使用stylus并检测autoprefixer是否生效

1、找到 src/components/Main.js 点击打开，然后把　require('styles/App.css');　这句代码修改成　require('styles/App.styl');

2、再找到  src/styles/App.css并把文件扩展名改成  .styl 点击打开，在其中加入

body
  display :flex
  box-sizing:border-box
  background : red

这段代码，然后 npm run start　跑一下，打开控制台，查看元素body，看是否为其自动加上了各浏览器兼容的　hack　缀名

到此ok，项目搭建算告一段落......　附上源码包，猛击下载

10、手动加入模似的静态json数据

1、新建一个data文件夹，再建一个imageDatas.json文件，把图片的json数据加入进去

2、安装json-loader

      npm install json-loader --save-dev   或者   cnpm install json-loader --save-dev

　  修改webpack配置文件defaults.js

      在其中找到函数getDefaultModules，然后loaders中添加一段匹配的正则

{
     test: /\.json$/,
     loader: 'json-loader'
}

　　

gitub完整项目源码地址：

https://github.com/zoujian3820/gallery-by-react

在线demo：

https://zoujian3820.github.io/gallery-by-react/

以上是 用yeoman搭建react画廊项目笔记 的全部内容， 来源链接： utcz.com/z/381647.html

回到顶部