ES6
ES6 (Ecmascript2015) : 6th generation of javascript
1. Syntax and features2. Classes, modules, array and object manipulation etc..
Babel and webpack(module builder)
Install
1. Node and npmWhy we need Babel and transpilers
# transpilers: reads code written in one language and produce the equivalent code in another.# coffee script, Typescript is made javascript easier. but many browsers don't support coffee script/typescript, so we need transpilers.
Why do we need transpilers?
# Browsers only currently have widespread support of older JS.# Transpilers convert advanced TypeScript and CoffeeScript code back into the original JS
Babel
is one of the famous transpilers and become an industry standard.
It allows writing ES6 code safely. It allows transforming nice looking ES6 code into 'pre-ES6' JS that browser support.
Webpack
A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows loading parts for the application on demand. Through "loaders" modules can be CommonJS, AMD, ES6 modules, CSS, Images, JSON, CoffeeScript, LESS.. and your custom stuff.
The benefits of webpack
1. It bundles modules (or multiple files) into one js file.
2. Comes with a dev-server.
Begin
aux@thashitharan:/WorkSpace/VSCode$ mkdir es6
aux@thashitharan:/WorkSpace/VSCode$ cd es6/
aux@thashitharan:/WorkSpace/VSCode/es6$ npm init -y
Wrote to /WorkSpace/VSCode/es6/package.json:
{
"name": "es6",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
Here 'webpack' is the actual webpack dependency library that contains webpack bundling functionality. 'webpack-cli' library allows us to use webpack on the command line
aux@thashitharan:/WorkSpace/VSCode/es6$ npm i webpack@4.16.5 webpack-cli@3.1.0 --save-dev
es6@1.0.0 /WorkSpace/VSCode/es6
├─┬ webpack@4.16.5
│ ├─┬ @webassemblyjs/ast@1.5.13
│ │ ├── @webassemblyjs/helper-wasm-bytecode@1.5.13
│ │ ├─┬ @webassemblyjs/wast-parser@1.5.13
│ │ │ ├── @webassemblyjs/floating-point-hex-parser@1.5.13
│ │ │ ├── @webassemblyjs/helper-code-frame@1.5.13
│ │ │ ├── @webassemblyjs/helper-fsm@1.5.13
│ │ │ └── long@3.2.0
│ │ ├─┬ debug@3.1.0
│ │ │ └── ms@2.0.0
│ │ └── mamacro@0.0.3
│ ├── @webassemblyjs/helper-module-context@1.5.13
│ ├─┬ @webassemblyjs/wasm-edit@1.5.13
│ │ ├── @webassemblyjs/helper-buffer@1.5.13
│ │ ├── @webassemblyjs/helper-wasm-section@1.5.13
│ │ ├── @webassemblyjs/wasm-gen@1.5.13
│ │ └── @webassemblyjs/wast-printer@1.5.13
│ ├── @webassemblyjs/wasm-opt@1.5.13
│ ├─┬ @webassemblyjs/wasm-parser@1.5.13
│ │ ├── @webassemblyjs/helper-api-error@1.5.13
│ │ ├─┬ @webassemblyjs/ieee754@1.5.13
│ │ │ └── ieee754@1.1.12
│ │ ├─┬ @webassemblyjs/leb128@1.5.13
│ │ │ └── long@4.0.0
│ │ └── @webassemblyjs/utf8@1.5.13
│ ├── acorn@5.7.1
│ ├── acorn-dynamic-import@3.0.0
│ ├─┬ ajv@6.5.2
│ │ ├── fast-deep-equal@2.0.1
│ │ ├── fast-json-stable-stringify@2.0.0
│ │ ├── json-schema-traverse@0.4.1
│ │ └─┬ uri-js@4.2.2
│ │ └── punycode@2.1.1
│ ├── ajv-keywords@3.2.0
│ ├─┬ chrome-trace-event@1.0.0
│ │ └── tslib@1.9.3
│ ├─┬ enhanced-resolve@4.1.0
│ │ └── graceful-fs@4.1.11
│ ├─┬ eslint-scope@4.0.0
│ │ ├── esrecurse@4.2.1
│ │ └── estraverse@4.2.0
│ ├── json-parse-better-errors@1.0.2
│ ├── loader-runner@2.3.0
│ ├─┬ loader-utils@1.1.0
│ │ ├── big.js@3.2.0
│ │ ├── emojis-list@2.1.0
│ │ └── json5@0.5.1
│ ├─┬ memory-fs@0.4.1
│ │ ├─┬ errno@0.1.7
│ │ │ └── prr@1.0.1
│ │ └─┬ readable-stream@2.3.6
│ │ ├── core-util-is@1.0.2
│ │ ├── inherits@2.0.3
│ │ ├── isarray@1.0.0
│ │ ├── process-nextick-args@2.0.0
│ │ ├── safe-buffer@5.1.2
│ │ └── util-deprecate@1.0.2
│ ├─┬ micromatch@3.1.10
│ │ ├── arr-diff@4.0.0
│ │ ├── array-unique@0.3.2
│ │ ├─┬ braces@2.3.2
│ │ │ ├── arr-flatten@1.1.0
│ │ │ ├─┬ extend-shallow@2.0.1
│ │ │ │ └── is-extendable@0.1.1
│ │ │ ├─┬ fill-range@4.0.0
│ │ │ │ ├── extend-shallow@2.0.1
│ │ │ │ ├─┬ is-number@3.0.0
│ │ │ │ │ └─┬ kind-of@3.2.2
│ │ │ │ │ └── is-buffer@1.1.6
│ │ │ │ ├── repeat-string@1.6.1
│ │ │ │ └── to-regex-range@2.1.1
│ │ │ ├── isobject@3.0.1
│ │ │ ├── repeat-element@1.1.2
│ │ │ ├─┬ snapdragon-node@2.1.1
│ │ │ │ ├─┬ define-property@1.0.0
│ │ │ │ │ └─┬ is-descriptor@1.0.2
│ │ │ │ │ ├── is-accessor-descriptor@1.0.0
│ │ │ │ │ └── is-data-descriptor@1.0.0
│ │ │ │ └─┬ snapdragon-util@3.0.1
│ │ │ │ └── kind-of@3.2.2
│ │ │ └── split-string@3.1.0
│ │ ├─┬ define-property@2.0.2
│ │ │ └─┬ is-descriptor@1.0.2
│ │ │ ├── is-accessor-descriptor@1.0.0
│ │ │ └── is-data-descriptor@1.0.0
│ │ ├─┬ extend-shallow@3.0.2
│ │ │ ├── assign-symbols@1.0.0
│ │ │ └─┬ is-extendable@1.0.1
│ │ │ └── is-plain-object@2.0.4
│ │ ├─┬ extglob@2.0.4
│ │ │ ├─┬ define-property@1.0.0
│ │ │ │ └─┬ is-descriptor@1.0.2
│ │ │ │ ├── is-accessor-descriptor@1.0.0
│ │ │ │ └── is-data-descriptor@1.0.0
│ │ │ ├─┬ expand-brackets@2.1.4
│ │ │ │ ├── debug@2.6.9
│ │ │ │ ├── define-property@0.2.5
│ │ │ │ ├── extend-shallow@2.0.1
│ │ │ │ └── posix-character-classes@0.1.1
│ │ │ └── extend-shallow@2.0.1
│ │ ├─┬ fragment-cache@0.2.1
│ │ │ └── map-cache@0.2.2
│ │ ├── kind-of@6.0.2
│ │ ├─┬ nanomatch@1.2.13
│ │ │ └── is-windows@1.0.2
│ │ ├── object.pick@1.3.0
│ │ ├─┬ regex-not@1.0.2
│ │ │ └─┬ safe-regex@1.1.0
│ │ │ └── ret@0.1.15
│ │ ├─┬ snapdragon@0.8.2
│ │ │ ├─┬ base@0.11.2
│ │ │ │ ├─┬ cache-base@1.0.1
│ │ │ │ │ ├─┬ collection-visit@1.0.0
│ │ │ │ │ │ ├── map-visit@1.0.0
│ │ │ │ │ │ └── object-visit@1.0.1
│ │ │ │ │ ├── get-value@2.0.6
│ │ │ │ │ ├─┬ has-value@1.0.0
│ │ │ │ │ │ └─┬ has-values@1.0.0
│ │ │ │ │ │ └── kind-of@4.0.0
│ │ │ │ │ ├─┬ set-value@2.0.0
│ │ │ │ │ │ └── extend-shallow@2.0.1
│ │ │ │ │ ├─┬ to-object-path@0.3.0
│ │ │ │ │ │ └── kind-of@3.2.2
│ │ │ │ │ ├─┬ union-value@1.0.0
│ │ │ │ │ │ └─┬ set-value@0.4.3
│ │ │ │ │ │ └── extend-shallow@2.0.1
│ │ │ │ │ └─┬ unset-value@1.0.0
│ │ │ │ │ └─┬ has-value@0.3.1
│ │ │ │ │ ├── has-values@0.1.4
│ │ │ │ │ └── isobject@2.1.0
│ │ │ │ ├─┬ class-utils@0.3.6
│ │ │ │ │ ├── arr-union@3.1.0
│ │ │ │ │ ├── define-property@0.2.5
│ │ │ │ │ └─┬ static-extend@0.1.2
│ │ │ │ │ ├── define-property@0.2.5
│ │ │ │ │ └─┬ object-copy@0.1.0
│ │ │ │ │ ├── copy-descriptor@0.1.1
│ │ │ │ │ ├── define-property@0.2.5
│ │ │ │ │ └── kind-of@3.2.2
│ │ │ │ ├── component-emitter@1.2.1
│ │ │ │ ├─┬ define-property@1.0.0
│ │ │ │ │ └─┬ is-descriptor@1.0.2
│ │ │ │ │ ├── is-accessor-descriptor@1.0.0
│ │ │ │ │ └── is-data-descriptor@1.0.0
│ │ │ │ ├─┬ mixin-deep@1.3.1
│ │ │ │ │ ├── for-in@1.0.2
│ │ │ │ │ └── is-extendable@1.0.1
│ │ │ │ └── pascalcase@0.1.1
│ │ │ ├── debug@2.6.9
│ │ │ ├─┬ define-property@0.2.5
│ │ │ │ └─┬ is-descriptor@0.1.6
│ │ │ │ ├─┬ is-accessor-descriptor@0.1.6
│ │ │ │ │ └── kind-of@3.2.2
│ │ │ │ ├─┬ is-data-descriptor@0.1.4
│ │ │ │ │ └── kind-of@3.2.2
│ │ │ │ └── kind-of@5.1.0
│ │ │ ├── extend-shallow@2.0.1
│ │ │ ├── source-map@0.5.7
│ │ │ ├─┬ source-map-resolve@0.5.2
│ │ │ │ ├── atob@2.1.1
│ │ │ │ ├── decode-uri-component@0.2.0
│ │ │ │ ├── resolve-url@0.2.1
│ │ │ │ ├── source-map-url@0.4.0
│ │ │ │ └── urix@0.1.0
│ │ │ └── use@3.1.1
│ │ └── to-regex@3.0.2
│ ├─┬ mkdirp@0.5.1
│ │ └── minimist@0.0.8
│ ├── neo-async@2.5.1
│ ├─┬ node-libs-browser@2.1.0
│ │ ├─┬ assert@1.4.1
│ │ │ └─┬ util@0.10.3
│ │ │ └── inherits@2.0.1
│ │ ├─┬ browserify-zlib@0.2.0
│ │ │ └── pako@1.0.6
│ │ ├─┬ buffer@4.9.1
│ │ │ └── base64-js@1.3.0
│ │ ├─┬ console-browserify@1.1.0
│ │ │ └── date-now@0.1.4
│ │ ├── constants-browserify@1.0.0
│ │ ├─┬ crypto-browserify@3.12.0
│ │ │ ├─┬ browserify-cipher@1.0.1
│ │ │ │ ├─┬ browserify-aes@1.2.0
│ │ │ │ │ └── buffer-xor@1.0.3
│ │ │ │ ├─┬ browserify-des@1.0.2
│ │ │ │ │ └── des.js@1.0.0
│ │ │ │ └── evp_bytestokey@1.0.3
│ │ │ ├─┬ browserify-sign@4.0.4
│ │ │ │ ├── bn.js@4.11.8
│ │ │ │ ├── browserify-rsa@4.0.1
│ │ │ │ ├─┬ elliptic@6.4.1
│ │ │ │ │ ├── brorand@1.1.0
│ │ │ │ │ ├── hash.js@1.1.5
│ │ │ │ │ ├── hmac-drbg@1.0.1
│ │ │ │ │ ├── minimalistic-assert@1.0.1
│ │ │ │ │ └── minimalistic-crypto-utils@1.0.1
│ │ │ │ └─┬ parse-asn1@5.1.1
│ │ │ │ └── asn1.js@4.10.1
│ │ │ ├── create-ecdh@4.0.3
│ │ │ ├─┬ create-hash@1.2.0
│ │ │ │ ├── cipher-base@1.0.4
│ │ │ │ ├─┬ md5.js@1.3.4
│ │ │ │ │ └── hash-base@3.0.4
│ │ │ │ ├── ripemd160@2.0.2
│ │ │ │ └── sha.js@2.4.11
│ │ │ ├── create-hmac@1.1.7
│ │ │ ├─┬ diffie-hellman@5.0.3
│ │ │ │ └── miller-rabin@4.0.1
│ │ │ ├── pbkdf2@3.0.16
│ │ │ ├── public-encrypt@4.0.2
│ │ │ ├── randombytes@2.0.6
│ │ │ └── randomfill@1.0.4
│ │ ├── domain-browser@1.2.0
│ │ ├── events@1.1.1
│ │ ├── https-browserify@1.0.0
│ │ ├── os-browserify@0.3.0
│ │ ├── path-browserify@0.0.0
│ │ ├── process@0.11.10
│ │ ├── punycode@1.4.1
│ │ ├── querystring-es3@0.2.1
│ │ ├── stream-browserify@2.0.1
│ │ ├─┬ stream-http@2.8.3
│ │ │ ├── builtin-status-codes@3.0.0
│ │ │ ├── to-arraybuffer@1.0.1
│ │ │ └── xtend@4.0.1
│ │ ├── string_decoder@1.1.1
│ │ ├─┬ timers-browserify@2.0.10
│ │ │ └── setimmediate@1.0.5
│ │ ├── tty-browserify@0.0.0
│ │ ├─┬ url@0.11.0
│ │ │ ├── punycode@1.3.2
│ │ │ └── querystring@0.2.0
│ │ ├── util@0.10.4
│ │ └─┬ vm-browserify@0.0.4
│ │ └── indexof@0.0.1
│ ├── schema-utils@0.4.7
│ ├── tapable@1.0.0
│ ├─┬ uglifyjs-webpack-plugin@1.2.7
│ │ ├─┬ cacache@10.0.4
│ │ │ ├── bluebird@3.5.1
│ │ │ ├── chownr@1.0.1
│ │ │ ├─┬ glob@7.1.2
│ │ │ │ ├── fs.realpath@1.0.0
│ │ │ │ ├─┬ inflight@1.0.6
│ │ │ │ │ └── wrappy@1.0.2
│ │ │ │ ├─┬ minimatch@3.0.4
│ │ │ │ │ └─┬ brace-expansion@1.1.11
│ │ │ │ │ ├── balanced-match@1.0.0
│ │ │ │ │ └── concat-map@0.0.1
│ │ │ │ └── once@1.4.0
│ │ │ ├─┬ lru-cache@4.1.3
│ │ │ │ ├── pseudomap@1.0.2
│ │ │ │ └── yallist@2.1.2
│ │ │ ├─┬ mississippi@2.0.0
│ │ │ │ ├─┬ concat-stream@1.6.2
│ │ │ │ │ ├── buffer-from@1.1.1
│ │ │ │ │ └── typedarray@0.0.6
│ │ │ │ ├─┬ duplexify@3.6.0
│ │ │ │ │ └── stream-shift@1.0.0
│ │ │ │ ├── end-of-stream@1.4.1
│ │ │ │ ├── flush-write-stream@1.0.3
│ │ │ │ ├── from2@2.3.0
│ │ │ │ ├─┬ parallel-transform@1.1.0
│ │ │ │ │ └── cyclist@0.2.2
│ │ │ │ ├── pump@2.0.1
│ │ │ │ ├── pumpify@1.5.1
│ │ │ │ ├── stream-each@1.2.3
│ │ │ │ └── through2@2.0.3
│ │ │ ├─┬ move-concurrently@1.0.1
│ │ │ │ ├── aproba@1.2.0
│ │ │ │ ├─┬ copy-concurrently@1.0.5
│ │ │ │ │ └── iferr@0.1.5
│ │ │ │ ├─┬ fs-write-stream-atomic@1.0.10
│ │ │ │ │ └── imurmurhash@0.1.4
│ │ │ │ └── run-queue@1.0.3
│ │ │ ├── promise-inflight@1.0.1
│ │ │ ├── rimraf@2.6.2
│ │ │ ├── ssri@5.3.0
│ │ │ └─┬ unique-filename@1.1.0
│ │ │ └── unique-slug@2.0.0
│ │ ├─┬ find-cache-dir@1.0.0
│ │ │ ├── commondir@1.0.1
│ │ │ └─┬ make-dir@1.3.0
│ │ │ └── pify@3.0.0
│ │ ├── serialize-javascript@1.5.0
│ │ ├── source-map@0.6.1
│ │ ├─┬ uglify-es@3.3.9
│ │ │ ├── commander@2.13.0
│ │ │ └── source-map@0.6.1
│ │ └── worker-farm@1.6.0
│ ├─┬ watchpack@1.6.0
│ │ └─┬ chokidar@2.0.4
│ │ ├── anymatch@2.0.0
│ │ ├── async-each@1.0.1
│ │ ├─┬ glob-parent@3.1.0
│ │ │ ├── is-glob@3.1.0
│ │ │ └── path-dirname@1.0.2
│ │ ├─┬ is-binary-path@1.0.1
│ │ │ └── binary-extensions@1.11.0
│ │ ├─┬ is-glob@4.0.0
│ │ │ └── is-extglob@2.1.1
│ │ ├── lodash.debounce@4.0.8
│ │ ├─┬ normalize-path@2.1.1
│ │ │ └── remove-trailing-separator@1.1.0
│ │ ├── path-is-absolute@1.0.1
│ │ ├─┬ readdirp@2.1.0
│ │ │ └── set-immediate-shim@1.0.1
│ │ └── upath@1.1.0
│ └─┬ webpack-sources@1.1.0
│ ├── source-list-map@2.0.0
│ └── source-map@0.6.1
└─┬ webpack-cli@3.1.0
├─┬ chalk@2.4.1
│ ├─┬ ansi-styles@3.2.1
│ │ └─┬ color-convert@1.9.2
│ │ └── color-name@1.1.1
│ └── escape-string-regexp@1.0.5
├─┬ cross-spawn@6.0.5
│ ├── nice-try@1.0.4
│ ├── path-key@2.0.1
│ ├── semver@5.5.0
│ ├─┬ shebang-command@1.2.0
│ │ └── shebang-regex@1.0.0
│ └─┬ which@1.3.1
│ └── isexe@2.0.0
├── global-modules-path@2.3.0
├─┬ import-local@1.0.0
│ ├─┬ pkg-dir@2.0.0
│ │ └─┬ find-up@2.1.0
│ │ └─┬ locate-path@2.0.0
│ │ └─┬ p-locate@2.0.0
│ │ └─┬ p-limit@1.3.0
│ │ └── p-try@1.0.0
│ └─┬ resolve-cwd@2.0.0
│ └── resolve-from@3.0.0
├─┬ inquirer@6.1.0
│ ├── ansi-escapes@3.1.0
│ ├─┬ cli-cursor@2.1.0
│ │ └─┬ restore-cursor@2.0.0
│ │ ├── onetime@2.0.1
│ │ └── signal-exit@3.0.2
│ ├── cli-width@2.2.0
│ ├─┬ external-editor@3.0.0
│ │ ├── chardet@0.5.0
│ │ ├─┬ iconv-lite@0.4.23
│ │ │ └── safer-buffer@2.1.2
│ │ └─┬ tmp@0.0.33
│ │ └── os-tmpdir@1.0.2
│ ├── figures@2.0.0
│ ├── lodash@4.17.10
│ ├── mute-stream@0.0.7
│ ├─┬ run-async@2.3.0
│ │ └── is-promise@2.1.0
│ ├── rxjs@6.2.2
│ ├─┬ string-width@2.1.1
│ │ └── is-fullwidth-code-point@2.0.0
│ ├─┬ strip-ansi@4.0.0
│ │ └── ansi-regex@3.0.0
│ └── through@2.3.8
├── interpret@1.1.0
├─┬ supports-color@5.4.0
│ └── has-flag@3.0.0
├── v8-compile-cache@2.0.2
└─┬ yargs@12.0.1
├─┬ cliui@4.1.0
│ └─┬ wrap-ansi@2.1.0
│ ├─┬ string-width@1.0.2
│ │ ├── code-point-at@1.1.0
│ │ └─┬ is-fullwidth-code-point@1.0.0
│ │ └── number-is-nan@1.0.1
│ └─┬ strip-ansi@3.0.1
│ └── ansi-regex@2.1.1
├─┬ decamelize@2.0.0
│ └── xregexp@4.0.0
├─┬ find-up@3.0.0
│ └─┬ locate-path@3.0.0
│ ├─┬ p-locate@3.0.0
│ │ └─┬ p-limit@2.0.0
│ │ └── p-try@2.0.0
│ └── path-exists@3.0.0
├── get-caller-file@1.0.3
├─┬ os-locale@2.1.0
│ ├─┬ execa@0.7.0
│ │ ├── cross-spawn@5.1.0
│ │ ├── get-stream@3.0.0
│ │ ├── is-stream@1.1.0
│ │ ├── npm-run-path@2.0.2
│ │ ├── p-finally@1.0.0
│ │ └── strip-eof@1.0.0
│ ├─┬ lcid@1.0.0
│ │ └── invert-kv@1.0.0
│ └─┬ mem@1.1.0
│ └── mimic-fn@1.2.0
├── require-directory@2.1.1
├── require-main-filename@1.0.1
├── set-blocking@2.0.0
├── which-module@2.0.0
├── y18n@4.0.0
└─┬ yargs-parser@10.1.0
└── camelcase@4.1.0
npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: fsevents@1.2.4
npm WARN es6@1.0.0 No description
npm WARN es6@1.0.0 No repository field.
aux@thashitharan:/WorkSpace/VSCode/es6$ cat package.json
{
"name": "es6",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.16.5",
"webpack-cli": "^3.1.0"
}
}
Make change in "scripts"
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
"start": "webpack --mode development"
"build": "webpack --mode production"
},
"keywords": [],
Comments
Post a Comment