Skip to content

Modern Javascript Development | Pro Dev tooling and function

Notifications You must be signed in to change notification settings

progmamun/Modern-Javascript-Development

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

23 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Modern Javascript Development

  1. Module => Bundling => Transpiling / Polyfilling|babel(convert to es5) => Javascript Bundle.

Build tools webpack hard to build or Parcel easy to build for production

Parcel parcel

sudo npm i parcel
npm i parcel --save-dev
npx parcel index.html

npm uninstall parcel
if(module.hot) {
  module.hot.accept()
}

Transpiling

.json  "script": {
  "start": "parcel index.html",
  "build": "parcel build index.html"
}
1. `"parcel build index.html --dist-dir ./dist"`
cmd=> `npm run build`

Polyfilling

npm i core-js

import script.js file| import 'core-js/stable';
// import 'core-js/stable/array/find';
// import 'core-js/stable/promise';

cmd$ npm i regenerator-runtime
// Polifilling async function
import 'regenerator-runtime/runtime';

git controls

gitignore .gitignore node_modules dist .parcel-cache | .DS_store > for macOS

GIT

  • git: git add -A, git status, git reset --hard HEAD(back to previous git add file)
  • git log(copy-commit id) then, git reset -hard demo83896EXAMPLE733974cde (back to previous commit code)
  • git branch new-feature(new branch create), git checkout new-feature(switch branch), git checkout master(switch branch if merge code from new-feature branch), git merge new-feature , git push origin new-feature (branch push)
  • git cheat sheet

Removing the last commit

  • If you want to "uncommit" the commits, but keep the changes around for reworking, remove the "--hard": git reset HEAD^ which will evict the commits from the branch and from the index, but leave the working tree around.

  • To remove the last commit from git, you can simply run git reset --hard HEAD^ If you are removing multiple commits from the top, you can run git reset --hard HEAD~2 to remove the last two commits. You can increase the number to remove even more commits.

  • If you want to save the commits on a new branch name, then run git branch newbranchname before doing the git reset.

Netlify: config your build, build command >parcel build index.html --dist-dir ./dist , publish-directory> dist

Module

  • Reusable piece of code that encapsulates implementation details;
  • Usually a standalone file, but it doesn't have to be.
  • Compose software: Modules are small building blocks that we put together to build complex applications;
  • Isolate components: Modules can be developed in isolation without thinking about the entire codebase;
  • Abstract code: Implement low-level code in modules and import these abstractions into other modules;
  • Organized code: Modules naturally lead to a more organized codebase;
  • Reuse code: Modules allow us to easily reuse the same code, even across multiple projects.

Importing Modules before execution

  • Modules are imported synchronously
  • Possible thanks to top-level("static") imports, which make imports known before execution
  • This makes bundling and dead code elimination possible

<script type="module" defer src="script.js"></script>

  • ES modules, two types of exports. Named Exports and Default Exports. Named Exports:
import './shoppingCart';
import { addToCart, totalPrice as price, tq } from './shoppingCart';
import * as ShoppingCart from './shoppingCart.js';

Default Export

export default function (product, quantity) {};
import add from './shoppingCart';
add('pizza', 2);
  • didn't use strict mode module have default

One time function | not reuse it

(function() {

})();

About

Modern Javascript Development | Pro Dev tooling and function

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published