在前端的项目中，有办法区分出真正打包进产品的 dependencies 和 dev dependencies 么？
yazoox · 2021-04-16 08:51:51 +08:00 · 1673 次点击这是一个创建于 1318 天前的主题，其中的信息可能已经有所发展或是发生改变。
我的理解是，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_ 整个目录扫描......
 |
1
zzerd 2021-04-16 09:10:19 +08:00
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.
|
 |
2
hackyuan 2021-04-16 09:14:46 +08:00
npm i --production
yarn --production |
 |
3
workg 2021-04-16 09:15:39 +08:00
webpack 打包会把所有依赖都会打包进去。跟 devDependencies 和 dependencies 并没有什么关系
|
 |
4
yazoox OP |
|
5
hackyuan 2021-04-16 09:33:28 +08:00
@yazoox 如你所说，你在执行 build 时会由于缺乏依赖失败，至于你把 devDependencies 的包放在 dependencies 那就没办法了
|
 |
6
Justin13 2021-04-16 09:40:03 +08:00 via Android
webpack-bundle-analyzer
|
 |
7
otakustay 2021-04-16 09:58:08 +08:00
如果用 webpack 这样的 bundler 的话，你的依赖应该全部是 devDep
|
 |
8
claneo 2021-04-16 10:02:47 +08:00
设置 webpack 输出 stats 数据就行，里面包含了所有被打包的文件信息
https://webpack.js.org/api/stats/ |
 |
9
66beta 2021-04-16 10:07:31 +08:00
webpack-bundle-analyzer
|
|
10
yazoox OP |
 |
11
fox2081 2021-04-20 17:12:11 +08:00
首先，使用 webpack 打包的时候，两种依赖没有任何区别，webpack 是入口式的，它不会管你写在哪里，只关心有没有，这两种依赖主要是针对你的项目作为别的项目依赖的时候是否安装的区别，webpack-bundle-analyzer 是可以生成打包分析的，除了图形也有 json 数据，你需要的应该就是这个，如果你是要使用的包全部放到一个目录下面去呢，在保证你项目直接的依赖都放在 dependencies 里面的话，可以写个简单的 node 脚本递归式扫描每层的 dependencies 然后 copy 出来，理论上来说，不做特殊优化的情况下，依赖树都会被打包进去。因为 npm 的问题，有可能出现同依赖多版本的问题，这种应该两个版本都在项目里面。
不过还是不明白你到底想要干什么，就算拷出来分析，不用的项目，项目中的所有代码也不一定用到，比如你的打包工具支持 esm，就会去找项目中 module 对应的 js，不支持就找 main，有些还有 umd 、压缩后的代码、源码，这样也分析不出来个什么，webpack-bundle-analyzer 里面该有的都有了 |
Select Language