## WEBPACK + WEBASSEMBLY WEBPACK AND THE CHALLENGE OF WEBASSEMBLY ## INTRODUCTION WEBASSEMBLY AND ESM ## WEBASSEMBLY? • Low-Level BINARY FORMAT FOR CODE • TYPED (I8 – I64, F32, F64) - MEMORY • USUALLY (NEW) SOURCE TYPE “MODULE” NEXT TO “SCRIPT” Allows new Syntax: • IMPORT • EXPORT • ALWAYS STRICT ESM = ECMASCRIPT MODULE ## EXPORTS, IMPORTS AND LIVE-BINDINGS export { x, y }; • DOES NOT EXPORT AN OBJECT BINDS x AND y IN THE NEW SCOPE (READ-ONLY) • ANY CHANGE IN THE ORIGIN MODULE IS REFLECTED HERE ## ESM LIFECYCLE - PHASE 1: RECURSIVELY: - LOAD AND PARSE FILES - RESOLVE IMPORTS • PHASE 2: “CONNECT”

@angular/animations : es2015 as esm2015 Compiling @angular/core : es2015 as esm2015 Compiling @angular/compiler/testing : es2015 as esm2015 Compiling @angular/animations/browser : es2015 as esm2015 Compiling @angular/core/testing @angular/core/testing : es2015 as esm2015 Compiling @angular/common : es2015 as esm2015 Compiling @angular/platform-browser : es2015 as esm2015 Compiling @angular/common/http : es2015 as esm2015 Compiling @angular/common/testing es2015 as esm2015 Compiling @angular/platform-browser-dynamic : es2015 as esm2015 Compiling @angular/platform-browser/testing : es2015 as esm2015 Compiling @angular/router : es2015 as esm2015 Compiling

FEATURES ..... 7 2.3.1. Fetch API ..... 7 2.3.2. Web Streams API in the global scope ..... 8 2.3.3. ESM Loader Hooks API supports multiple custom loaders ..... 8 2.3.4. Watch mode ..... 9 2.4. SUPPORTED ##### 2.3.3. ESM Loader Hooks API supports multiple custom loaders The ESM Loader Hooks API was introduced as a Technology Preview feature in the Red Hat build of Node.js 16 release. The ESM Loader Hooks

shown below: E:\rxjsproj\src>npm install --save-dev esm npm WARN rxjsproj@1.0.0 No description npm WARN rxjsproj@1.0.0 No repository field. + esm@3.2.25 added 1 package from 1 contributor and audited package is installed, we can now execute testrx.js file as shown below: E:\rxjsproj\src>node -r esm testrx.js Output is: 1 Output is: 4 Output is: 9 We can see the output now, that shows RxJS is installed "@babel/preset-env": "^7.6.0", "babel-loader": "^8.0.6", "esm": "^3.2.25", "rxjs": "^6.5.3", "webpack": "^4

top-level runtime • CONSUMABLE AS ESM ## NEW SPECS • WE ARE EXPERIMENTING WITH NEW WEB SPECS • CSS MODULES (THE SPEC ONE, NOT THE EXISTING ONE) • HTML MODULES • WASM-ESM-INTEGRATION • TOP-LEVEL-AWAIT

HARMONY - FIRST PROTOTYPE OF HARMONY MODULES SUPPORT • HARMONY MODULES = NOW ECMASCRIPT MODULES (ESM) • webpack-2 BRANCH ## JS • ADDED SUPPORT FOR NON-JS CONFIGS PRs by @monder and @akre54, using interpret • BETTER TREE SHAKING WITH THE sideEffects FLAG • MODULE TYPES: NATIVE SUPPORT FOR: JS (CJS/AMD/ESM) JSON • WASM (WebAssembly Module) JAN 2018: ALPHA VERSION WEBPACK 4 • webpack-cli • NOW A SEPARATE

window) 构建的，它们被打包成 IIFEs $ ^{☑} $ (opens new window)，并且仅用于通过 安装 • 用于通过原生 模块导入使用（在浏览器中通过