（3）运行 Mix 任务编译和监控代码
最后更新于：2022-04-02 01:42:07
注意：本节命令均需要在项目根目录下运行。
[TOC]
## 编译
>[info] 所有编译后的资源文件都被存放在 `public` 文件夹中。
### 开发模式
>[warning] 生成的文件未被压缩，便于开发调试：
~~~bash
$ npm run dev
~~~
或
~~~bash
$ npm run developmennt
~~~
### 生产模式
>[success] 生成的文件自动经过压缩，便于线上加载：
~~~bash
$ npm run prod
~~~
或
~~~bash
$ npm run production
~~~
## 监控
>[info] 可在开发时一直运行，Webpack 检测到文件更改时将自动重新编译资源：
~~~bash
npm run watch
~~~
在某些环境中，当文件更改时，Webpack 不会更新。
如果系统出现这种情况，请考虑使用 `watch-poll` 命令：
~~~bash
$ npm run watch-poll
~~~
## 可能出现的报错
### Module build failed: `node-sass`
>[danger] 报错内容：
~~~bash
ERROR Failed to compile with 2 errors
error in ./resources/assets/sass/app.scss
Module build failed: Error: ENOENT: no such file or directory, scandir '/home/vagrant/Code/Laravel/node_modules/node-sass/vendor'
·
·
·
error in ./resources/assets/sass/app.scss
Module build failed: ModuleBuildError: Module build failed: Error: ENOENT: no such file or directory, scandir '/home/vagrant/Code/Laravel/node_modules/node-sass/vendor'
~~~
>[warning] 报错原因：
> 打开 `~node_modules/node-sass/vendor` 文件夹下为空，缺少 `linux-x64-48/binding.node` 文件。
>[success] 解决方法：
> 执行以下命令，更改包内容后进行重建
~~~bash
$ npm rebuild node-sass --no-bin-links
~~~
>[info] 成功后显示：
~~~bash
Downloading binary from https://github.com/sass/node-sass/releases/download/v4.5.3/linux-x64-48_binding.node
Cannot download "https://github.com/sass/node-sass/releases/download/v4.5.3/linux-x64-48_binding.node":
ETIMEDOUT
Timed out attemping to establish a remote connection
·
·
·
gyp info ok
Installed to /home/vagrant/Code/Laravel/node_modules/node-sass/vendor/linux-x64-48/binding.node
node-sass@4.5.3 /home/vagrant/Code/Laravel/node_modules/node-sass
~~~
### Module build failed: `optipng-bin`
>[danger] 报错内容：
~~~bash
ERROR Failed to compile with 2 errors
error in ./resources/assets/semantic/dist/themes/default/assets/images/flags.png
Module build failed: Error: spawn /home/vagrant/Code/Laravel/node_modules/optipng-bin/vendor/optipng ENOENT
·
·
·
error in ./resources/assets/sass/app.scss
Module build failed: ModuleBuildError: Module build failed: Error: spawn /home/vagrant/Code/Laravel/node_modules/optipng-bin/vendor/optipng ENOENT
~~~
>[warning] 报错原因：
> 打开 `~node_modules/optipng-bin` 文件夹下缺少 `vendor/optipng` 文件。
>[success] 解决方法：
> 执行以下命令，更改包内容后进行重建
~~~bash
$ npm rebuild optipng-bin --no-bin-links
~~~
>[info] 成功后显示：
~~~bash
·
·
·
✔ optipng pre-build test passed successfully
optipng-bin@3.1.4 /home/vagrant/Code/Laravel/node_modules/optipng-bin
~~~
### Cannot find module 'xxxxx'
>[danger] 报错内容举例：
~~~bash
module.js:471
throw err;
^
Error: Cannot find module 'crypt'
~~~
>[warning] 报错原因：
> 因为网络或者其他原因，导致某个扩张包没有正常安装上。
> `~node_modules` 目录下没有 `crypt` 文件夹。
>[success] 解决方法：
缺少什么包就添加什么包。
当然也可以 [清空所有扩展包，然后重新安装一遍](frontend/install-packages.md)。
';