A music player by React

技术栈采用react(16.x)+react-router-dom(4.x)+ES6+create-react-app

git clone [email protected]:LuvJia/react-musicplayer.git
cd react-musicplayer

npm install
或
yarn install

npm start
// npm run build(打包)

GitHub Page 需要使用相对路径，修改： 在yarn run build后该项目会生成一个build文件，但是点击其中的index.html文件打开后浏览器是空白页面。 解决办法:

去掉.gitignore文件中的/build,或者使用git add -f build。因为配置文件中对这个文件夹的上传进行了忽略。另外在在package.json配置文件中加一句："homepage": "./",然后进行打包(yarn run build)

打包后播放页面是空白的,是因为使用react-router-dom里的BrowserRouter as Router,改用Router就好了 然后打包项目：

yarn run build

将 build 提交到 Git 仓库：

git add -A
git commit -m "release project"
git push origin master

推送到 GitHub Page：

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

地址：https://luvjia.github.io/react-musicplayer/

###暴露配置文件 create-react-app生成的项目，看不到webpack相关的配置文件，需要先暴露出来，使用如下命令即可:

bash npm run eject

安装less-loader和less

bash yarn add less-loader less --save

修改webpack配置

修改 webpack.config.dev.js 和 webpack.config-prod.js 配置文件

改动1

• /\.css$/ 改为 /\.(css|less)$/

改动2

• test: /\.css$/ 改为 /\.(css|less)$/

• test: /\.css$/ 的 use 数组配置增加 less-loader

修改后如下
javascript { loader:require.resolve('less-loader') }