What is NPM (Node Package Manager) ?
NPM was initially developed as the package manager of the NodeJs. Therefore NPM is distributed (available) with the NodeJs installation.
NPM (Node Package Manager) and NodeJs Server
Here we are going to create a project that manage its dependencies with NPM. Therefore if you dont have the NPM installed in you development environment, please visit the NodeJs website and install the NodeJs. If you instal the NodeJs, you will get both NPM (Node Package Manager) and NodeJs Server. Since the Node Server is available, it can be used as a development server to deploy the project files.
Create a project with NPM (Node Package Manager)
Creating the Project directory.
In order to manage the project with NPM, execute the ‘npm init‘ command inside the project directory.
This will initialize the NPM (Node Package Manager) support for the project. In other words, the project will be managed by the NPM . Then you can NPM to manage (install, remove and update) dependencies of the project.
After executing the npm init command, you will be required to provide answers for couple of questions that will be used to create and initialize the package.json file. If you dont provide the answers, the values that are displayed inside the parenthesis will be considered as the default values. (Please refer the screenshot given below.)
Once above command is successfully executed, the package.json file will be created for the project. If you observe the above screenshot properly, you can see the initial content of the newly created package.json file.
In package.json, we can declare the project related dependencies (dev and production), commands and other configurations.
Install the webpack and babel dependencies.
For the development purpose, we need following dependencies.
- webpack-cli (command line utility)
- webpack-dev-server (development server)
- babel related dependencies (babel-loader, babel-preset-env)
webpack-cli is a command line utility that helps to generate the webpack configuration file (webpack.config.js) and execute the webpack commands in command line.
Babel is responsible for transpiling ES6 code into ES5 code. Since we are running the babel as a loader in webpack, we need to install babel-loader dependency. babel-loader is the webpack plugin for babel.
In addition to the babel-loader, we need to add the following babel-preset for the project.
- babel-preset-env :- will enable the required features to detect the ES version of the source files and enable the traspiling of ES6+ based source to ES5 based source file.
If you want to know more about presets, please go through the following section.
What is the purpose of barbel preset?
For more information about “preset”, please visit the official website.
Why do we enable “babel-preset-env” without enabling “babel-preset-es2015” ?
This is a good point. This preset will automatically detect the ECMAScript version (ES version) of your source code and enable the related features for compiling the source code into ES5 version.
babel-preset-env is the latest babel preset that compiles ES2015+ (ES6, ES7, ES8 ) down to ES5 by automatically determining the Babel plugins needed based on your targeted browser or runtime environments.
Without any configuration options, babel-preset-env behaves exactly the same as babel-preset-latest (or babel-preset-es2015, babel-preset-es2016, and babel-preset-es2017 together).
In our case, we are trying to compile the ES6 code into ES5. So here babel-preset-env can be used.
The following command can be used to install the development related dependencies described above.
npm install \
Please refer the screenshot given below.
Then you can see that it is added to the devDependencies section of the package.json file.
Now we have installed, the production and development related dependencies for the project. Now we will generate the webpack configuration file with webpack-cli tool.
Generating the Webpack configuration file (webpack.config.js) with webpack-cli
I have written a separate article on generating webpack configuration file using webpack-cli utility. You can follow that article for more information.
Click here to go to the article on generating webpack.config.js with webpack-cli.
For this article, i will run only the required steps to generate the configuration file.
npx webpack init
Then provide the answers for the questions asked based on your project related details.
Now you have the generated webpack configuration file in the root of the project directory. This is just an initial version and you can make any amendment or configuration change.
Here what i have changed.
- Import the ‘path’ library
- adding the ‘presets‘
- changing some of the resource paths
- adding the webpack-dev-server configuration.
Here is the finalized version of the webpack configuration file used in this article.
Adding the webpack-dev-server configuration.
If you observer the above configuration file, you can notice that we have configured the webpack-dev-server as follows.
contentBase: path.join(__dirname, "dist/"),
contentBase:- Tell the server where to serve content from.
port: development Server will be up and running on port 9000.
The official documentation of the dev server can be found at:-https://webpack.js.org/configuration/dev-server/
Here we have created NPM (Node Package Manager) managed project and configure Babel and Webpack as development dependencies. You can use this project as a reference template for any NPM managed project.