React学习之图片画廊项目《一》

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/dw1067061570/article/details/71079808

本项目是使用Yeoman生成项目文件目录,使用Webpack打包,react开发的。

第一部分是Yeoman生成项目文件

1>第一步,安装Yeoman(在安装Yeoman之前需要先安装node,请自行搜索安装),使用如下命令:

npm install -g yo

使用yo --version 命令查看版本信息,若正确显示版本信息即表示安装成功。

2>安装generator,因为本项目是基于webpack+react开发的,因此此处安装generator-react-webpack,使用如下命令:

npm install -g generator-react-webpack

3>创建项目仓库。为了更好保证项目的安全,我们把项目放在github上。首先在github上创建本项目的仓库,然后使用命令

github 仓库地址信息
例如:

github git@github.com:dingww/gallery-by-react.git  

将远程仓库克隆到本地。

4>在本地仓库,用命令

yo react-webpack gallery-by-reat(仓库名)
生成项目文件。此过程中需要在控制台做一些选择,视需求而定。

5>安装本项目所需的依赖:react、react-dom、sass-loader、json-loader,安装命令可自行搜索安装。

6>配置webpack,在自动生成的文件中,webpack的配置文件为cfg文件夹中的default.js文件。关于webpack的配置方法也请自行搜索学习,本文不作详细介绍。本项webpack的配置为:

'use strict';

const path = require('path');
const srcPath = path.join(__dirname, '/../src');
const dfltPort = 8000;

/**
 * Get the default modules object for webpack
 * @return {Object}
 */
function getDefaultModules() {
  return {
    preLoaders: [{
      test: /\.(js|jsx)$/,
      include: srcPath,
      loader: 'eslint-loader'
    }],
    loaders: [{
      test: /\.css$/,
      loader: 'style-loader!css-loader!autoprefixer-loader?{browsers:["last 2 version"]}'
    }, {
      test: /\.sass/,
      loader: 'style-loader!css-loader!sass-loader?outputStyle=expanded&indentedSyntax'
    }, {
      test: /\.scss/,
      loader: 'style-loader!css-loader!sass-loader?outputStyle=expanded'
    }, {
      test: /\.less/,
      loader: 'style-loader!css-loader!less-loader'
    }, {
      test: /\.styl/,
      loader: 'style-loader!css-loader!stylus-loader'
    }, {
      test: /\.json$/,
      loader: 'json-loader'
    }, {
      test: /\.(png|jpg|gif|woff|woff2|eot|ttf|svg)$/,
      loader: 'url-loader?limit=8192'
    }, {
      test: /\.(mp4|ogg|woff|woff2|eot|ttf|svg)$/,
      loader: 'file-loader'
    }]
  };
}

module.exports = {
  srcPath: srcPath,
  publicPath: 'assets/',
  port: dfltPort,
  getDefaultModules: getDefaultModules
};

7>执行webpack命令,对项目进行打包。

8>为了方便调试,可使用热加载,输入命令:

npm run serve
就可以在浏览器中使用该命令给出的地址来查看demo的展示。

这样整个项目的结构和配置就完成了,接下来就可以进入正式的项目开发阶段,下篇再述。




没有更多推荐了,返回首页