Please enable JavaScript.
Coggle requires JavaScript to display documents.
ES6-TOOLING - Coggle Diagram
ES6-TOOLING
BABEL
Install
npm i
babel-cli@6.26.0
babel-core@6.26.0
babel-preset-env@1.6.1
--save-dev
Setup
Make
ProjectDir
Initialize
npm init --yes
Package.json
Created
Using
Create
Index.js
Package.json
Redeclare
Scripts : {..}
"babel" :
babel --presets
env index.js
-o build/index.js
Running
Create
Build
Folder
Npm run babel
WEBPACK
Install
Npm i -g
webpack-cli@2.0.14
Initialize
webpack-cli init
Questions
Multi-Bundles
NO
First-Module
./src/index
Generated
Bundle
<enter>.
Default
Production
Use
No
ES2015/ES6
Use
Yes
CSS
Bundle-Name
Skip
<enter>
Solutions
No
Config-File
Name
<enter>
Default
Setup
Package.json
Create
Npm init --yes
Scripts
Add
"build" :
"webpack -w"
Bundle
Npm run build
Use
dist/main.bundle.js
MODULES
Modularity
Maintainability
Reuse
Abstract
Formats
AMD
Asynchronous
Module
Definition
Browser
CommonJS
Node.js
UMD
Universal
Module
Definition
Browser
Node.js
ES6-Modules
Browser
Learn
CommonJS
ES6-Modules
ES6-MODULES
Exporting
Export var
Export Default Var
Importing
import {var}
import var
from './circle'
Development
Using
Index.js
As-Module
<script type="module" ...>
import ... "./circle.js"
TOOLING
Browser
Applications
Transpiler
Translator+Compiler
Modern-JS
To
ES5
Babel
Bundler
Combining
Multiple-JS
Into-One
Bundle.js
Webpack
Minify
Uglify
COMMON-JS
Exporting
module.exports
IsObject
.Circle = Circle
module.exports = Circle
Importing
const Circle
= require("./circle")
Extension
.js
Not-Required