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

筆記倉庫：github.com/nnngu/Learn…

---

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

效果預覽

點擊圖片，切換到背面：

演示地址

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

環境搭建

一、安裝 npm，安裝成功後，在終端輸入 npm -v 能夠查看它的版本。

二、安裝generator-react-webpack，使用以下命令：

npm install -g generator-react-webpack
複製代碼

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

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

四、建立完成，項目的目錄以下圖：

須要注意的幾個地方：

• ① 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 添加以下配置信息：

添加圖片

一、在 src 目錄下添加 images 目錄和一些圖片，以下圖：(圖片尺寸所有是 260 * 260)

二、添加 imageDatas.json 以下圖：

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

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

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

四、根據圖片的文件名，生成圖片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中。以下圖：

具體代碼請參照項目的源代碼 github.com/nnngu/Music…

發佈到Github Pages

一、修改cfg/defaults.js中的publicPath，改成publicPath: './assets/', 以下圖：

二、打包，使用npm run dist指令。打包完成能夠看到以下目錄：

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

git subtree push --prefix=dist origin gh-pages
複製代碼

四、在GitHub 對應的倉庫裏面開啓 Github Pages 功能，並選擇 gh-pages分支便可。

👇👇👇下一篇將會總結完成音樂播放器的過程。👇👇👇

05 (項目) 基於 React + Webpack 的音樂相冊（下）