注意：本节命令均需要在项目根目录下运行。 [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)。