在 --save-dev 包中使用时，生产包如何工作？

Posted 2023-02-22

【中文标题】在 --save-dev 包中使用时，生产包如何工作？

【英文标题】：How do production packages work when used inside a --save-dev package?

【发布时间】：2021-10-18 13:02:05

【问题描述】：

我正在处理 React Redux course，我们使用 npm install --save-dev redux-devtools-extension 安装了 Redux devtools，并像这样使用它：

import  composeWithDevTools  from 'redux-devtools-extension'

const store = createStore(
  reducer,
  composeWithDevTools()
)

我的理解是--save-dev 标志意味着这个包不会在生产中使用。课程的下一部分介绍 Redux Thunk 并使用 npm install redux-thunk 安装。如果我没记错的话，这意味着这个包将用于生产。但是，thunk 在课程中是这样使用的：

import thunk from 'redux-thunk'
import  composeWithDevTools  from 'redux-devtools-extension'

const store = createStore(
  reducer,
  composeWithDevTools(
    applyMiddleware(thunk)
  )
)

thunk 在使用--save-dev 安装的包函数中使用。由于该版本不会安装 redux-devtools-extension，这将如何在生产中工作？

【问题讨论】：

这些包很可能在 build 时被 Webpack 打包 - 严格来说，在这种情况下没有运行时生产依赖项，您提供的是静态文件。

除非我弄错了，如果你的代码中引用了库，它们就会包含在你的包中。这就是它所需要的。在我看来，将它们分成dependencies 或devDependencies 仍然是一种让事情更有条理的好习惯。因此，从技术上讲，即使您在 dependencies 中有例如 webpack，它也不会被捆绑，因为您不会在应用程序中导入 webpack。

如果你想要更多的控制，你总是可以将某些导入（技术上 require()）放在 if (process.env.node_env === 'production')（或“开发”）子句中。

【参考方案1】：

--save-dev 将第三方包添加到包的开发依赖中。当有人直接运行 npm install 来安装你的包时，它不会被安装。它通常仅在有人先克隆您的源存储库然后在其中运行 npm install 时才会安装。

【参考方案2】：

简短的回答是否，它不应该在生产中工作。当您在开发模式下安装依赖项时，它应该仅用于开发目的。当您通过 --save-dev 标志安装依赖项时，依赖项不会捆绑到生产代码中。由于您在代码中包含了依赖项而没有任何条件语句（if 语句）来确定您是否处于开发模式，并且您仅在开发模式下安装了依赖项，因此代码已经中断

import  composeWithDevTools  from 'redux-devtools-extension'

如果你真的想只在开发环境中使用开发工具，请在非开发模式下安装它并使用以下导入语句：

import  composeWithDevTools  from 'redux-devtools-extension/developmentOnly';

同时，如果您只想在生产中使用它，请导入它。

import  composeWithDevTools  from 'redux-devtools-extension/logOnlyInProduction';

如果你想以任何一种方式使用这个开发工具，那么你可以使用第一个 import 语句，因为它不会检查你的环境。

如果第一条语句在生产环境中运行良好，那么作者/合作者将没有必要在库的源代码中包含 developmentOnly 和 logOnlyInProduction 变体。

每个变种的区别可以在src代码中找到：

https://github.com/zalmoxisus/redux-devtools-extension/blob/c220fd18d6fb4b0790a501ec4df0de52b5bee460/npm-package/logOnly.js#L40

https://github.com/zalmoxisus/redux-devtools-extension/blob/master/npm-package/developmentOnly.js

https://github.com/zalmoxisus/redux-devtools-extension/blob/master/npm-package/logOnlyInProduction.js