说说我自己理解的dependencies和devDependencies的区别

         网上看了很多的资料，半懂半不懂的，后来略略想通了。我自己对这两个的理解有些粗暴，简单谈谈我个人的理解吧，不对之处，还请指出。

        dependencies：生产环境。这个生产环境不是对程序猿们来说，是对公司来说，产出利益的环境，我理解为用户使用环境。用户使用该环境下的代码。

        devDependencies：开发环境。开发环境是对于程序员来说的。程序猿们在该环境下进行代码的编辑。

        开发环境下，程序猿利用各种打包工具进行开发，调试。如webpack，vite等，它们功能强大，模块管理非常好，各种目录清晰。你 可以进行各种组件、路由、插件、函数等等的分块使用，清晰了然。

         说完两者环境的理解，说说打包的过程。

        开发环境下，程序猿们一般在浏览器进行调试，执行了npm run dev，代码直接在调试器中运行。

        生产环境下，用户们使用的程序，是向服务器请求的，服务器中的程序，是在打包工具进行打包后的代码，以vite为例，执行了npm run build，打包生成的是dist文件夹：

 可以看出，dist文件夹下，有index.html，这是入口文件，入口文件中引入了.js，.css等类型的文件。

 上图中的index.html中，link标签引入了css文件，script标签引入了js文件。

        到了这里，也看到了两者环境下的差异，生产环境下，用户们只需要dist下的文件，并不关注使用了less、sass、ts还是js。打包工具只会把所有的代码，不管是less还是sass，ts还是js，统统打包为js、css、index.html文件。

        所以，生产环境下，是用户需要的东西，程序运行在用户设备上所依赖的；

        开发环境下，程序猿们需要而用户不需要的依赖的。举个例子：

         上图中，devDependencies下，有vite，ts,  less, less-loade，各种工具，便于程序的开发，这些是用户都不需要的。less被解析为css，ts被编译为js，它们最终只是为了更好地生产js、css文件的。

        而用户需要的，dependencies下，有Vue，vueRouter, pinia，这些是会被打包进入dist文件里的。回想一下Vue，它是不是抛出了一个Vue的对象，挂载到了window下面。window使用了这些对象，生成了漂亮的页面和友好的交互性。

总结一下：

        dependencies生产环境下的文件，是用户使用时需要的，程序运行在用户设备上的依赖。

        devDependencies开发环境下的文件，用户并不依赖于它们。程序猿们可以利用开发环境下的各种工具，写出更好的代码，然后被打包工具打包进dist文件夹中。

当然，程序猿们也需要生产环境下的文件写代码的。

        下次使用npm，下载各种奇奇怪怪的文件时，不用再纠结加不加-d, -D,--save之类的。举个例子：

在npm下载时，例如下载一个sass时，命令：npm install sass

命令不加任何后缀的：npm install sass                        下载到生产环境

后加   --save  ：          npm install sass --save             下载到生产环境

后加  -d   :                    npm install sass -d                    下载到生产环境

下载到开发环境时，需要加大写的-D，

npm run sass -D                 下载到开发环境下       

        

        一句话，下载到开发环境，必须加 -D，一定是要大写的D。因为开发环境的英文字母devDependencies中有一个大写的D的字母。

下载到生产环境下，不可以有大写的-D。