第一节 Yarn 安装前端扩展包

本节涉及以下目录或文件： > * 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 to select, to toggle all, 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. ~~~