基於 React + Webpack 的音樂相冊項目（上）

筆記倉庫：https://github.com/nnngu/LearningNotes

上一篇文章用爬蟲自動下載了一些圖片，這一篇就用這些圖片做一個音樂相冊吧！

效果預覽

點擊圖片，切換到背面：

演示地址

演示地址：https://nnngu.github.io/MusicPhoto/

環境搭建

1、安裝 npm，安裝成功後，在終端輸入 npm -v 可以查看它的版本。

2、安裝generator-react-webpack，使用如下命令：

npm install -g generator-react-webpack

安裝完成之後，輸入npm list --depth=0 -global 可以查看版本。

3、創建項目，打開你用來存放代碼的目錄，然後輸入：yo react-webpack MusicPhoto

4、創建完成，項目的目錄如下圖：

需要註意的幾個地方：

• ① cfg 目錄是配置文件所在的目錄
• 重點關註 cfg 目錄裡面的 defaults.js 文件
  
• ② src 項目的源代碼主要在這裡面
• ③ package.json 用來管理和配置依賴模塊

添加 autoprefixer-loader 模塊

autoprefixer-loader 是用來處理 css 的模塊，安裝命令：

npm install autoprefixer-loader --save-dev

然後打開 cfg 目錄中的 defaults.js 添加如下配置信息：

添加 json-loader 模塊

json-loader 是用來處理 json 的模塊，安裝命令：

npm install json-loader --save-dev

然後打開 cfg 目錄中的 defaults.js 添加如下配置信息：

添加圖片

1、在 src 目錄下添加 images 目錄和一些圖片，如下圖：(圖片尺寸全部是 260 * 260)

2、添加 imageDatas.json 如下圖：

imageDatas.json 裡面的代碼請參照項目的源代碼。

3、在src/components/Main.js中引入imageDatas.json 代碼如下：

// 獲取圖片的 json 數據
var imagesData = require('../data/imageDatas.json');

4、根據圖片的文件名，生成圖片URL。

src/components/Main.js

/**
 * @imagesDataArray  {Array}
 * @return {Array}
 */
imagesData = (function getImageURL(imagesDataArray) {
  for (var i = 0, j = imagesDataArray.length; i < j; i++) {
    var singleImageData = imagesDataArray[i];

    singleImageData.imageURL = require('../images/' + singleImageData.fileName);

    imagesDataArray[i] = singleImageData;
  }
  return imagesDataArray;
})(imagesData);

配置字體

打開 cfg 目錄中的 defaults.js 添加如下配置信息：

組件的綁定

src/index.html 中的關鍵代碼：

src/index.js 中的關鍵代碼：

代碼邏輯

主要的代碼邏輯在 Main.js中，主要的佈局樣式在 App.scss中。如下圖：

具體代碼請參照項目的源代碼 https://github.com/nnngu/MusicPhoto

發佈到Github Pages

1、修改cfg/defaults.js中的publicPath，改為publicPath: './assets/', 如下圖：

2、打包，使用npm run dist指令。打包完成可以看到如下目錄：

3、把打包好的目錄 push 到 GitHub 的 gh-pages 分支，使用如下命令：

git subtree push --prefix=dist origin gh-pages

4、在GitHub 對應的倉庫裡面開啟 Github Pages 功能，並選擇 gh-pages分支即可。