npm run dev 和 npm run production 的区别答案

【问题标题】：Difference between npm run dev and npm run productionnpm run dev 和 npm run production 的区别
【发布时间】：2020-11-17 20:12:37
【问题描述】：

我是Laravel和vue.js的新手。请告诉我npm run dev和npm run production有什么区别。这与环境有关吗？

【问题讨论】：

这些只是package.json 中定义的脚本的别名，所以它可以是任何东西。
npm run prod 也会缩小输出。
npm run prod 是 npm run production 的快捷方式。

标签： php laravel vue.js npm

【解决方案1】：

npm run dev 创建一个源映射并且不会缩小您的 js/css，这使得调试和发现错误更容易

另一方面，npm run production 不会创建源映射并缩小所有 js/css 文件，以便它们可以用于生产并更快地被系统读取。

通常，您在开发网站时希望使用npm run dev，在准备部署时使用npm run production。

【讨论】：

【解决方案2】：

这些是在package.json 上定义的别名，用于执行脚本

这里是别名和带有参数的相应命令。

 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": "npm run development -- --watch",
        "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 --disable-host-check --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 --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },

我们在这里看到两个命令之间的两个参数差异

对于开发/开发来说是

NODE_ENV=development --progress

对于生产来说是

NODE_ENV=production --no-progress

这意味着当 dev 命令运行时，节点环境设置为开发，而当 prod 运行时，节点环境设置为生产。此外，在开发命令中显示时，生产中不会显示进度。

默认任务会因环境而异。您也可以使用它在webpack.mix.js 文件上自定义您自己的任务

const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');

//run this task if the environment is not in production
if(!mix.inProduction()) {
   mix.sourceMaps();
   mix.webpackConfig({ devtool: 'inline-source-map'})
}

Webpack

开发和生产之间的实际区别在于优化。对于生产而言，与开发相比，构建时间会更多，因为一些优化任务只会在生产中完成，这也会缩小代码。在 Laravel 中，默认使用 Laravel mix 来轻松配置它。底层由 webpack 处理。从此处的 webpack 文档中，您可以实际检查两个环境和特定环境任务之间的区别。

构建性能 develpment 与 production

【讨论】：