在前端的项目中，有办法区分出真正打包进产品的 dependencies 和 dev dependencies 么？

[yazoox]

我的理解是，npm install or yarn add 即使指定了 --save-dev，并不表示这个包里面的代码，真的仅仅是在 dev dependencies 里面，而没有打包进 product ？

所以，有没有工具或者方法能够查找 /列出来, yarn.lock 或者 node_modules_下面，哪些包是被真的打包进了产品，e.g. 当 webpack 打包过程中，或者有没有相关的 webpack 插件，或者统计，等等。

谢谢！

p.s 当然，如果有方法，能够把这些包提出来，单独放在一个目录下更好。
p.s 提出问题的初衷，是因为我们要对代码进行扫描分析，但只想对产品代码（即真正发布给用户的代码）进行扫描。dev or test 相关的代码，不关注。但是目前，没有办法，只能对 node_module_ 整个目录扫描......

[zzerd]

With the --production flag (or when the NODE_ENV environment variable is set to production), npm will not install modules listed in devDependencies. To install all modules listed in both dependencies and devDependencies when NODE_ENV environment variable is set to production, you can use --production=false.

[hackyuan]

npm i --production
yarn --production

[workg]

webpack 打包会把所有依赖都会打包进去。跟 devDependencies 和 dependencies 并没有什么关系

[yazoox]

@zzerd
@hackyuan

兄弟，你们俩说的我明白，可是这个参数，只是告诉 npm or yarn，只安装 dependencies (不安装 dev dependencies)。
完全有可能 developer 在添加这个依赖的时候，放到了 dev dependencies 里面去了啊。
还是说，yarn 或者 npm 在安装包的时候，如果发现 prod 环境需要的包，在 devDependencies 下面，也会安装？我觉得它们不会......

[hackyuan]

@yazoox 如你所说，你在执行 build 时会由于缺乏依赖失败，至于你把 devDependencies 的包放在 dependencies 那就没办法了

[Justin13]

webpack-bundle-analyzer

[otakustay]

如果用 webpack 这样的 bundler 的话，你的依赖应该全部是 devDep

[claneo]

设置 webpack 输出 stats 数据就行，里面包含了所有被打包的文件信息
https://webpack.js.org/api/stats/

[66beta]

webpack-bundle-analyzer

[yazoox]

@Justin13
@66beta
这个用来生成图表的吧？并不能帮忙我把 prod 使用的包全部放到一个目录下面去呢。

@hackyuan 这个用法有点意思，我去试试。

[fox2081]

首先，使用 webpack 打包的时候，两种依赖没有任何区别，webpack 是入口式的，它不会管你写在哪里，只关心有没有，这两种依赖主要是针对你的项目作为别的项目依赖的时候是否安装的区别，webpack-bundle-analyzer 是可以生成打包分析的，除了图形也有 json 数据，你需要的应该就是这个，如果你是要使用的包全部放到一个目录下面去呢，在保证你项目直接的依赖都放在 dependencies 里面的话，可以写个简单的 node 脚本递归式扫描每层的 dependencies 然后 copy 出来，理论上来说，不做特殊优化的情况下，依赖树都会被打包进去。因为 npm 的问题，有可能出现同依赖多版本的问题，这种应该两个版本都在项目里面。

不过还是不明白你到底想要干什么，就算拷出来分析，不用的项目，项目中的所有代码也不一定用到，比如你的打包工具支持 esm，就会去找项目中 module 对应的 js，不支持就找 main，有些还有 umd 、压缩后的代码、源码，这样也分析不出来个什么，webpack-bundle-analyzer 里面该有的都有了