Where should Babel and Webpack be placed in your package.json file - under devDependencies or Dependencies?

I'm a beginner when it comes to npm and I have doubts on what should be included in dependencies as opposed to devDependencies. I understand that testing libraries belong in dev, but what about tools like babel and webpack? Should they also be categorized as dev since they are used for transcompiling es6 and JSX into JavaScript? My understanding is that when deploying to Heroku, the necessary libraries already handle the transcompilation process, so there is no need to have them in production?

  "dependencies": {
    // List of dependencies...
  },
  "devDependencies": {
     // List of devDependencies...
  }
javascriptnpmdependenciespackagepackage-managers

Answer №1

When converting and packaging your code into plain JavaScript in files such as bundle.js, the babel and webpack packages will be included in the devDependencies section.

Once your code is built and generated in production, there will no longer be a need for these dependencies as they are only necessary during the transpiling and bundling process.

Answer №2

Contrary to popular belief, I have a simple piece of advice to offer amidst the chaos:

Ask yourself one question: Is your project going to be integrated with another project through npm install? In other words, are you creating an npm module that will be included in another project's package.json?

If the answer is no:

Then include everything in dependencies.

If the answer is yes:

In essence, modules do not magically install differently. They either get installed or they don't.

Answer №3

Development dependencies, often referred to as devDependencies, are packages that are only used for the development server and not in the final source code or production environment.

"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"clean-webpack-plugin": "^0.1.19",
"copy-webpack-plugin": "^4.5.1",
"css-loader": "^0.28.11",
"file-loader": "^1.1.11",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.4.0",
"node-sass": "^4.8.3",
"optimize-css-assets-webpack-plugin": "^4.0.0",
"prop-types": "^15.6.1",
"sass-loader": "^7.0.1",
"style-loader": "^0.21.0",
"uglifyjs-webpack-plugin": "^1.2.5",
"webpack": "^4.6.0",
"webpack-cli": "^3.1.1",
"webpack-dev-server": "^3.1.9"

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Experimenting with the inner workings of a method by utilizing vue-test-utils alongside Jest

Is there a way to properly test the internal logic of this method? For instance: async method () { this.isLoading = true; await this.GET_OFFERS(); this.isLoading = false; this.router.push("/somewhere"); } This method toggles isLoading, ...

javascriptunit-testingvue.jsfrontendvue-test-utils

React strict mode and Material UI console notifications

Just like a rapidly growing application can make the console as dirty as a footballer's shirt. What am I trying to convey? When using Material UI in strict mode, warnings such as FindDomNode may appear, or it may ask you to use strings instead of bo ...

javascriptreactjsmaterial-uistrict-mode

How can I resolve the dependency problem with create-react-app?

As a beginner delving into React, I encountered an issue while attempting to create a project in VSCode using npx create-react-app app. The following error message popped up: PS C:\Users\USER\Desktop\folder> npx create-react-app app ...

node.jsreactjsnpmcreate-react-appreact-scripts

Safari failing to load JavaScript on live website

While JavaScript functions correctly both locally and in production on Chrome, I am facing issues when trying to run it on Safari. Despite having JavaScript enabled on Safari and it working fine locally, it fails to work on the production environment. This ...

javascriptjqueryruby-on-railssafarihaml

Invoking a nested method within Vue.js

I am facing an issue in my vuejs application with 2 methods. When I define method1 a certain way, it does not run as expected. method1: function(param1, param2){ // I can log param1 here thirdLib.debounce(function(param1, params2){ // It d ...

javascriptvue.jsvuejs2

How can I center the window vertically based on the middle of an element?

Hey guys, I need some help with my code. I've been trying to create a button that will shift the window's Y position to center the "Box - 5" div vertically through an onclick event. Basically, I want to make sure the "Box - 5" div is positioned i ...

javascriptjquery

When submitting an Asp net mvc Form, some fields may not be posted as expected

I'm facing an issue with my ASP.NET MVC application form. Some fields that should be posted are missing, and I can't figure out why. <form id="FormRegistroUsuario" action="/Account/AdminSecurityUserAccountAdd"> <fieldset> ...

javascriptjqueryhtmlforms

What is the best way to display input fields only if the previous input has a valid value?

My challenge involves creating a form with 3 to 10 text input fields. Initially, the form will display only 3 inputs (minimum). I am looking for an efficient way to dynamically show additional input rows as each previous row is filled out with a valid val ...

javascriptjqueryformsloops

Displaying a custom error page in Next.js with the appropriate status code

I recently implemented a custom error page following the instructions provided in the documentation. My goal was to use this error page for specific errors that may occur during the getStaticProps function. Here's how I structured it: const Page: Next ...

javascriptreactjsnext.js

Is there a way to configure the package.json script to perform multiple npm install commands?

Is there a way to run npm install in both my main folder and subfolder without using separate commands? npm install cd subfolder npm install I am looking for a solution where I can execute two npm install commands in one single command in my main folder, ...

npmpackage.json

detect and handle errors when deploying the Node.js function

I'm currently attempting to use code I found on Github to insert data into a Firestore database, but unfortunately, I keep encountering an error. Here's the specific error message: 21:1 error Expected catch() or return promise/catch-or-re ...

javascriptnode.jsgoogle-cloud-firestore

While observing a camera in motion, the particles tinted by texture display sporadic flickering on WebGL and Three.js

Check out this jsfiddle I created to illustrate an issue with particles "flickering" when colored using a texture and the camera is moving. Update: The problem occurs even when there is no animation or movement on the particles. If you notice flickering o ...

javascriptthree.jswebgl

My component reference seems to have gone missing in angular2

Trying to load my Angular 2 app, I encountered this error: https://i.stack.imgur.com/FmgZE.png Despite having all the necessary files in place. https://i.stack.imgur.com/kj9cP.png Any suggestions on how to resolve this issue? Here is a snippet from ap ...

javascripthtmlintellij-ideaangular

Getting the toState parameter using the $transitions service in the latest version of the ui-router

In my project, I am currently utilizing ui-router version 1.0.0-alpha.3. Please note that the older events have been deprecated in this version. As a result, I am in the process of migrating from: $rootScope.$on('$stateChangeStart', (event, toS ...

javascriptangularjsangular-ui-router

What is the process for exporting a class and declaring middleware in TypeScript?

After creating the user class where only the get method is defined, I encountered an issue when using it in middleware. There were no errors during the call to the class, but upon running the code, a "server not found" message appeared. Surprisingly, delet ...

javascriptangularjstypescriptexpressrouting-controllers

Expand the accordion to reveal all the content

I'm facing an issue with my accordion where a scrollbar appears in every content section. To fix this, I tried setting overflow: hidden in the CSS: .ui-accordion .ui-accordion-content { padding: 1em 2.2em; border-top: 0; overflow: hidd ...

javascriptjqueryhtmlcssaccordion

Vue.js: The chart's dataset has been refreshed

I am utilizing vue-chart.js to create a basic chart. import { Line } from 'vue-chartjs'; export default { extends: Line, mounted() { this.renderChart({ labels: [this.getChartLabels], datasets: [ { label: &a ...

javascriptvue.jsvue-chartjs

Dynamically Add Routes in ExpressJS During Runtime

I am interested in creating routes dynamically at runtime, but I'm not entirely sure how to do it. Currently, I have the following code snippet: var app = express(); function CreateRoute(route){ app.use(route, require('./routes/customchat.js&ap ...

javascriptnode.jsexpressroutesruntime

Tips for developing a directive that supplies values for ng-options

I have select elements with the same options throughout the entire app, but they may vary in appearance. For example, selects for a user's birthday (day, month, year). Is it possible to create a directive that can provide values or expressions for ng ...

javascriptangularjsangularjs-directiveng-options

Is there a tool available that can monitor my installed npm packages and easily restore them on another development environment, similar to the way "Restore NuGet packages" works?

Being new to node/npm packages, I encountered a scenario that left me puzzled. After installing all the dependencies in one environment, I pushed the code to a remote repository Then pulled it into another development environment However, attempting to a ...

node.jsnpm