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

Can an onload function be triggered within the location.href command?

Can a function be called onload in the location.href using jQuery? location.href = getContextPath() + "/home/returnSeachResult?search=" + $('#id-search-text-box').val() + "&category=" + $('#search_concept').text() + "onload='j ...

javascriptjquery

What is the best way to convert an ajax get request into a post request using jQuery?

I'm interested in transforming a GET request to a POST request: $.ajax({ url: '/items?ids=' + value.join(','), method: 'get', dataType: 'json' }) What changes do I need to make to turn this into a ...

javascriptjqueryajaxpost

Ensure that the npm local folder dependency is always updated whenever the grunt task is executed

I am in the process of creating a new NPM/grunt-based tool (let's call it ProjectX) that consists of two separate NPM modules - one for customizable user content and another for essential core services. The user-configurable module relies on the core ...

node.jsnpmgruntjs

What could be the reason for the NODE_DEBUG=fs environment variable not working as expected?

According to the Node.js documentation on the fs module at https://nodejs.org/api/fs.html#fs_file_system: To obtain a trace back to the original call site, you can set the NODE_DEBUG environment variable: Here is an example of setting the fs environmen ...

javascriptnode.jsenvironment-variables

At runtime, the array inexplicably becomes null

Having recently ventured into the world of Ionic framework development, I have encountered a puzzling issue. At runtime, an array inexplicably gets nulled and I am struggling to pinpoint the root cause. export interface Days { name:string; } @Compon ...

javascriptangulartypescriptionic-framework

Retrieving Data from Database Using Laravel and Ajax Post-Update

I am facing an issue with my edit form, designed for admins to edit book details. Upon submitting the form, the values are updated in the database successfully. However, the page fails to load the updated values into the form without requiring a refresh/re ...

javascriptphpjqueryajaxlaravel

Exploring JavaScript functions within the Rails 4 asset pipeline directory

I am facing an issue while trying to use a JavaScript function through the Chrome Console after embedding that function within the Rails Asset Pipeline Manifest. To achieve this, I followed these steps to create and set up a basic Rails 4.2.4 App: $ rails ...

javascriptruby-on-railsasset-pipeline

Script malfunctioning following an AJAX request

My page consists of a header where all my javascript is located. Within the body of the page, there is a link that triggers an ajax http request using vanilla JavaScript (not jQuery). This request retrieves a PHP form and injects it onto my page. The PHP ...

javascriptajaxxmlhttprequest

What could be causing the background image on my element to not update?

I'm attempting to utilize a single background image that is 3 pixels wide and 89 pixels tall. Each vertical stripe of 1 pixel will serve as the background for a different div. I had presumed that adjusting the background-position by -1px 0 and specif ...

javascriptjqueryhtmlcss

When the page loads, a JavaScript function is triggered

My switchDiv function in Javascript is being unexpectedly called when the page loads. It goes through each case in the switch statement, except for the default case. Does anyone know how to solve this issue? $(document).ready(function() { $("#be-button" ...

javascriptjquery

The process of eliminating body padding in Nuxt.js

I'm considering building a website using Nuxt.js because I've heard it's both cool and user-friendly. While I do have some knowledge of vue.js, I'm stuck on a particular issue: How can I remove the padding from the body? I understand ...

javascripthtmlcssnuxt.js

Discovering the scroll position in Reactjs

Utilizing reactjs, I am aiming to manage scroll behavior through the use of a `click` event. To start, I populated a list of posts using `componentDidMount`. Next, upon clicking on each post in the list using the `click event`, it will reveal the post de ...

javascriptreactjs

How can Mbox content be loaded dynamically according to the selected option in a dropdown menu, instead of loading it when

I am looking to enhance my asp.net page by adding a new MBox that will be triggered based on the dropdown selected value. Unlike other MBoxes on the page that load on page load, I want this new MBox to dynamically pass custom parameters to T&T when a val ...

javascriptadobe-analyticsmbox

Limiting access in _app.js using Firebase and Redux

In my application, users can access the website without logging in. However, they should only be able to access "/app" and "/app/*" if they are authenticated. The code I have written seems to work, but there is a brief moment where the content of "/app" ...

javascriptreactjsreduxnext.js

Invoke the subscribe function within the encompassing parent function

In crafting a versatile method, I have devised the following code snippet: fetchArticle(loading: Loading): void { this.articleService.getArticleById(this.data.definition.id) .map((response: any) => response.json()) .subscribe((response: ...

javascriptangulartypescriptrxjsobservable

Attempting to modify the array content using useState, but unfortunately, it is not functioning as expected

Starting out with react.js and trying to update an array's content using useState upon clicking a send-button, but it's not working as expected. Struggling with adding date and number in the row. Check image here Here's what I'm aiming ...

javascriptarraysreactjsuse-state

The withRouter function in React Router does not automatically inject the router

Desiring to implement withRouter on my primary React component named 'App'. You can view the documentation here. This is how I utilize it: import React from "react"; import { render } from "react-dom"; import {Router, Link, hashHistory, Rout ...

javascriptreactjsreact-routermaterial-ui

The Tauri development and building process encountered errors on an Ubuntu system

When attempting to create a tauri app on Ubuntu 16.4.7 (LTS) following the official documentation, I encounter numerous errors after running either sudo npm run tauri dev or sudo npm run tauri build. The log file shows: 0 info it worked if it ends with ok ...

node.jslinuxubuntunpmtauri

How to detect internet connection in any screen using React Native?

I'm facing confusion regarding how to display my customDialog when there is no Internet connection in my app. Currently, I have successfully shown my customDialog only in the LoginScreen. However, I want to display it from different screens, not just ...

javascriptandroidiosreactjsreact-native

What steps can I take to resolve the error that occurred following the execution of the command npx cap add android

When I tried installing "@capacitor/android" using "npm install @capacitor/android" and then adding android with "npx cap add android", an error occurred which says: npm ERR! could not determine executable to run I am currently using Node version v20.10.0 ...

node.jsnpmionic-framework