https://github.com/bdmostafa/webpack-babel-boilerplate

This is a webpack babel boilerplate. It can help you compile your next generation code to old version ES5 code easily. Just clone this repo and install npm. That's done!
https://github.com/bdmostafa/webpack-babel-boilerplate

babel-es6 babel-loader babel-preset babel7 babeljs es6-modules javascript-library webpack webpack-babel webpack-boilerplate webpack-dev-server

Last synced: 26 days ago
JSON representation

This is a webpack babel boilerplate. It can help you compile your next generation code to old version ES5 code easily. Just clone this repo and install npm. That's done!

• Host: GitHub
• URL: https://github.com/bdmostafa/webpack-babel-boilerplate
• Owner: bdmostafa
• Created: 2020-08-20T08:16:24.000Z (about 4 years ago)
• Default Branch: master
• Last Pushed: 2020-08-20T08:42:07.000Z (about 4 years ago)
• Last Synced: 2024-09-29T06:21:45.671Z (about 1 month ago)
• Topics: babel-es6, babel-loader, babel-preset, babel7, babeljs, es6-modules, javascript-library, webpack, webpack-babel, webpack-boilerplate, webpack-dev-server
• Language: JavaScript
• Homepage:
• Size: 143 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
Steps to create this boilerplate as like below:

You can use common js modular pattern (used by Node js internal) and ES6 modular pattern as well.

Some workflow tools - webpack, gulp, grunt etc.

Webpack is to fix the issues as like huge coding on one file, debugging issue, multiple scripts (single responsibility principal), multiple request handling in index.html file, bandwidth loss, slowing the application

Webpack- module bundler (bundle multiple js file to single file)

https://webpack.js.org/

Main file - main.js/app.js/script.js (anyone)

Dependency file - UI.js, Store.js, weather.js, or any related js file (altogether)

Babel - Convert the latest code into the older version code so that both of old and modern browsers can read the code and execute well

JavaScript compiler - (next generation code to ES5)

https://babeljs.io/

How to install webpack on project folder

https://webpack.js.org/guides/getting-started/

npm init -y

npm install webpack webpack-cli --save-dev

Install babel under webpack

https://webpack.js.org/loaders/

https://webpack.js.org/loaders/babel-loader/

npm install -D babel-loader @babel/core @babel/preset-env webpack - (webpack (not needed))

babel documentation

https://babeljs.io/docs/en/babel-preset-env

@babel/preset-env is a smart preset that allows you to use the latest JavaScript without needing to micromanage which syntax transforms (and optionally, browser polyfills) are needed by your target environment(s).

Latest code is transformed to ES5 or any old version code

create index.html

Create src folder -> index.js

create webpack.config.js (name must be)

Use js common modular pattern

require path

....

webpack generates build folder automatically

Method 1. Babel loaders - write some rules on webpack.config.js

https://webpack.js.org/loaders/babel-loader/#usage

for multiple script js files loading and converting next generation code into ES5

Method 2. For async await converting support, use polyfill

https://webpack.js.org/guides/shimming/#loading-polyfills

Method 3. For server creating use webpack dev server

https://webpack.js.org/guides/development/#using-webpack-dev-server

https://webpack.js.org/configuration/dev-server/#devserverpublicpath-