How do production packages work when used inside a --save-dev package?

user_13062495 0
Viewed 222

I am working through a React Redux course and we installed Redux devtools using npm install --save-dev redux-devtools-extension and used it like this:

import { composeWithDevTools } from 'redux-devtools-extension'

const store = createStore(
  reducer,
  composeWithDevTools()
)

My understanding is the --save-dev flag means this package won't be used in production. The next section of the course introduces Redux Thunk and is installed using npm install redux-thunk. If I am not mistaken, this means this package will be used in production. However, thunk is used in the course like this:

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

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

thunk is used inside a package function that was installed using --save-dev. How would this work in production since that version would not install redux-devtools-extension?

npm redux reactjs javascript
2 Answers

--save-dev adds the third-party package to the package's development dependencies. It won't be installed when someone runs npm install directly to install your package. It's typically only installed if someone clones your source repository first and then runs npm install in it.

user_121474710

A short answer is no, it should not work in production. When you installed a dependency in dev mode, then it should only meant for development purpose. As you installed the dependencies via --save-dev flag, the dependencies will not bundle into production code. Since you have included your dependencies in your code without any conditional statement (if statement) to determine whether or not you are in development mode and you have installed the dependency in dev mode only, the code already breaks at

import { composeWithDevTools } from 'redux-devtools-extension'

If you really want to use the dev tools only in dev environment, install it in not dev mode and use the following import statement:

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

Meanwhile if you only want to use it in production, import this.

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

And if you want to use this dev tools in either way, then you may use back the first import statement as it will not check for your environment.

If the first statement is working fine for the production environment, then there will be no point for the author/collaborator to include the developmentOnly and logOnlyInProduction variant in the source code of the library.

The difference of each variant is available in the src code:

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

user_123117980
Related