第一節 Yarn 安裝前端擴展包 · Laravel 5.5 學習筆記

本節涉及以下目錄或文件： > * node_modules/ > * resources/assets/ > * package.json Laravel 前端默認 ui 是 [Bootstrap](https://github.com/twbs/bootstrap)，本教程將其替換為 [Semantic UI](http://www.semantic-ui.com/)。 [TOC] ## 修改 `package.json` 文件 `package.json` 文件位于項目根目錄下。 ### 默認版 ~~~json { "private": true, "scripts": { "dev": "npm run development", "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", "watch-poll": "npm run watch -- --watch-poll", "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js", "prod": "npm run production", "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js" }, "devDependencies": { "axios": "^0.16.2", "bootstrap-sass": "^3.3.7", "cross-env": "^5.0.1", "jquery": "^3.1.1", "laravel-mix": "^1.0", "lodash": "^4.17.4", "vue": "^2.1.10" } } ~~~ >[info] 默認集成的 NPM 擴展包： > 1. bootstrap-sass —— Bootstrap NPM 擴展包； > 2. jquery —— jQuery NPM 擴展包； > 3. laravel-mix —— 由 Laravel 官方提供的靜態資源管理工具； > 4. vue —— VUE.js 前端框架； ### 修改后 ~~~json { "private": true, "scripts": { "dev": "npm run development", "development": "NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", "watch": "NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", "watch-poll": "npm run watch -- --watch-poll", "hot": "NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js", "prod": "npm run production", "production": "NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js" }, "devDependencies": { "axios": "^0.16.2", "cross-env": "^5.0.1", "jquery": "^3.1.1", "laravel-mix": "^1.0", "lodash": "^4.17.4", "nprogress": "^0.2.0", "optimize-css-assets-webpack-plugin": "^3.2.0" } } ~~~ >[danger] 修改概要： > 1. 暫時去除 `vue`，加入 `nprogress`。 > 2. 添加 `optimize-css-assets-webpack-plugin` 用來壓縮 CSS。 > 3. 修改去掉 `scripts` 字段中的全部 `cross-env`。因為虛擬機為 Linux 環境，不需要 `cross-env`，否則會各種報錯。 ## 使用 `Yarn` 安裝擴展包在項目根目錄下運行 ~~~bash $ yarn install --no-bin-links ~~~ 成功后顯示： ~~~bash yarn install v0.27.5 [1/4] Resolving packages... [2/4] Fetching packages... [3/4] Linking dependencies... [4/4] Building fresh packages... success Saved lockfile. Done in 153.67s. ~~~ ### Yarn & NPM 常用命令 |NPM | Yarn | 釋義 | |---|---|---| | `npm install` | `yarn` | 安裝當前項目的所有包 | | `npm install taco --save` | `yarn add taco` | taco 包被添加到 package.json 的 "dependencies" 中 | | `npm uninstall taco --save` | `yarn remove taco` | 從項目中移除 taco 包 | | `npm install taco --save-dev` | `yarn add taco --dev` | taco 包被添加到 package.json 的 "devDependencies" 中 | | `npm update --save` | `yarn upgrade` | 更新包 | >[info] 運行時需要用到的包使用 `--save`，否則使用 `--save-dev`。 > 不掛 VPN 或某些報錯的情況下，可用 `cnpm` 代替 `npm`。 >[danger] 注意事項： > 在 Windows 下的 Homestead 虛擬機中，運行 npm 或 yarn 添加移除或更新包時，命令需帶 `--no-bin-links`。 > 如果某次執行沒有帶上，很可能造成包丟失或者其他錯誤。 ### 如遇報錯可嘗試 1. `Ctrl+C` 停止 2. 清空舊的安裝包 * 主機中全局安裝 `rimraf`（僅首次） ~~~bash > npm install -g rimraf ~~~ * 主機中使用 `rimraf` 刪除 `node_modules` 文件夾 ~~~bash > cd E:/Homestead/code/Laravel > rimraf node_modules ~~~ * 虛擬機中執行 ~~~bash $ npm cache clear --force ~~~ 3. 重新執行安裝命令 ~~~bash $ yarn install --no-bin-links ~~~ ## 添加 `semantic-ui` 依賴 ~~~bash $ yarn add semantic-ui --dev --no-bin-links ~~~ 安裝進行至此，會卡在 `Starting 'run setup'` 這步： ~~~bash yarn add v0.27.5 [1/4] Resolving packages... [2/4] Fetching packages... [3/4] Linking dependencies... [4/4] Building fresh packages... [1/1] ? semantic-ui: Starting 'run setup'... [-/1] ? waiting... [-/1] ? waiting... [-/1] ? waiting... [-/1] ? waiting... ~~~ >[warning] 這也是為什么不直接將 `semantic-ui` 依賴寫入 `package.josn` 的原因，避免卡住無限制 `waiting`。 `Ctrl+C` 強制退出，手動執行安裝： ~~~bash $ cd node_modules/semantic-ui/ $ gulp install ~~~ 安裝選項概要： >[info] 1. 通過上下箭頭選擇，回車選定。 > 2. 將Semantic UI資源文件安裝到 `resources/assets/semantic` 文件夾中。 ~~~bash Starting 'run setup'... ? Set-up Semantic UI (Use arrow keys) Automatic (Use default locations and all components) ? Express (Set components and output folder) Custom (Customize all src/dist values) ? We detected you are using NPM Nice! Is this your project folder? /home/vagrant/Code/Laravel ? Yes No, let me specify // 這里設置資源輸出目標文件夾 ? Where should we put Semantic UI inside your project? (semantic/) resources/assets/semantic/ ? What components should we include in the package? (Press <space> to select, <a> to toggle all, <i> to inverse selection) ?? reset ? site ? button ? container ? divider ? flag ? header (Move up and down to reveal more choices) ? Should we set permissions on outputted files? No ? Do you use a RTL (Right-To-Left) language? No ? Where should we output Semantic UI? dist · · Installing ------------------------------ Installing to resources/assets/semantic/ · · Setup Complete! Installing Peer Dependencies. Please refrain from ctrl + c... After completion navigate to resources/assets/semantic/ and run "gulp build" to build ~~~ 安裝完畢后執行以下命令，生成 Semantic UI 的 js 和 css 文件： ~~~bash $ cd ~/Code/Laravel/resources/assets/semantic/ $ gulp build ~~~ 生成完畢后，記得返回項目根目錄。最終，`package.json` 文件中不會添加 `semantic-ui` 依賴，但 `yarn.lock` 文件中已經有相關記錄。如果再次執行最初的添加`semantic-ui` 依賴的命令，則會跳過安裝過程直接添加依賴到`package.json` 文件中，提示： ~~~bash yarn add v0.27.5 [1/4] Resolving packages... [2/4] Fetching packages... [3/4] Linking dependencies... [4/4] Building fresh packages... success Saved 1 new dependency. └─ semantic-ui@2.2.13 Done in 80.53s. ~~~