ESM-CJS interop test
ESM-CJS interop test Test Cases Results Node.js Babel Webpack Rollup.js Parcel esbuild Results by test case Results by syntax import x and similar import { named } and similar import { __esModule } and similar import * and similar import() and similar require().default and similar require().named and similar require().__esModule and similar require() and similar Direct differences Webpack <-> Node
slides/content/ModuleFederationWebpack5.md at master · sokra/slides
The motivation for Module Federation is developing one or more applications with multiple teams. Applications are split into smaller application "parts". These could be frontend components like a "Header" or "Sidebar" component, but also logical components like "Data Fetching Logic" or other business logic. Each part can be developed by a separate team. Applications or parts of them share other pa
import文で画像やCSSを読み込むのはECMAScript仕様違反か - uhyo/blog
近頃のJavaScript開発は、モジュールとして書かれた複数のJavaScriptファイルをimport文やexport文を通じて連携させるのが基本です。また、それらのファイルはWebpackに代表されるバンドラによって事前に処理され、import文の解決・ファイルの結合といった前処理を施されるのが普通です。まったく、各ファイルが他に影響を与えないように(function(){ ... })()で囲んで文字列連結していた時代が懐かしいですね。 さて、import文の解決を担当するバンドラは、大抵JavaScriptプログラム以外のものを読み込む機能を備えています。Webpackならばloaderと呼ばれるものですね。例えば、style-loaderやcss-loaderが持つCSS Modulesの機能を使うと次のようなプログラムを書くことができます（Reactの例）。 import s
JavaScript Modules: From IIFEs to CommonJS to ES6 Modules
I've taught JavaScript for a long time to a lot of people. Consistently the most commonly under-learned aspect of the language is the module system. There's a good reason for that. Modules in JavaScript have a strange and erratic history. In this post, we'll walk through that history and you'll learn modules of the past to better understand how JavaScript modules work today. Before we learn how to
2018 年の tree shaking - 株式会社カブク
Discussion 1. CommonJS は tree shaking されない ※追記、修正あり すべてのモジュールバンドラーが、 import { isEqual } from 'lodash'; を tree shaking できませんでした。これは、 CommonJS は静的に解析することができない困難または不可能（2018/06/15 修正）なためです。 例えば、 ES Modules の import, export に対応する CommonJS の require、 exports は、それぞれ以下のように動的に書くことが許容されています。 require const fooOrBar = require(Math.random() < 0.5 ? 'foo' : 'bar'); exports for(const name of ['foo', 'bar']) { ex
次のリリースであるwebpack 4の主な変更点まとめ - 技術探し
移行ガイド abouthiroppy.hatenablog.jp ドワンゴのアドベントカレンダーの17日が空いているので本来その予定で書かれた記事ではないですが、そこに埋めます。 2日連続になってしまった。。 qiita.com Happy Xmas, Noders! #Nodejs pic.twitter.com/Rsxr8SbeUz— hiroppy😶 (@about_hiroppy) 2017年12月24日 さて、今年は、webpack3.0.0が2017/06にリリースされました🎉 (現在、3.10.0) medium.com After we released webpack v2, we made some promises to the community. We promised that we would deliver the features you voted
Setting up multi-platform npm packages
Note: “ES5+” means “whatever language features are supported by the JavaScript engines you are targeting”. Background: JavaScript module formats # At the moment, these are the most common JavaScript module formats: AMD (asynchronous module definition): an asynchronous module format for browsers. CJS (CommonJS): a synchronous module format designed for servers (such as Node.js). Due to the popular
Native ECMAScript modules: the new features and differences from Webpack modules
In the previous article Native ECMAScript modules - the first overview I described the history of the JavaScript modules and the current situation with the native ECMAScript modules implementation: For now, we have 2 available implementations, which we tried and compared to the bundled module. The main takeaways, so far, are: To execute a script or load an external file and execute it as a module
Release v2.2.0-rc.4 · webpack/webpack
Node.js dropped support for 0.12, so we do. Breaking changes: Using CommonJS or AMD export stuff in a ES2015 module will emit errors. Usablility: performance hints are off by default. It was too annoying, but you can still see the [big] flag by default. Bugfixes: webpack now exits with non-zero exit code when configuration Promise is rejected. Features: ProvidePlugin supports passing array to acce
The Numbers on Webpack 1 vs 2
So last week I wrote about my experiences with upgrading to Webpack 2. In that story, I mentioned that it seemed like Webpack v2 was much faster than v1. So why not try and benchmark each version and provide some numbers? Disclaimer: I’m not a performance engineer or a statistician. Take this story as a data-point and do your own comparisons. I have no vested interests in any of the technologies m
Webpack 2 Tree Shaking Configuration
Tree Shaking, a modern dead code elimination algorithm for ECMAScript 2015+ is one of the most anticipated features in Webpack 2. By eliminating unused ES6 exports, Webpack can further help the minification process to get your bundle much smaller than ever before. Update 11/14/2016: Webpack 2 sample application code has been updated to match the most recent updates in Webpack (v2.2), React (v15.4)
The cost of small modules
15 Aug The cost of small modules Posted August 15, 2016 by Nolan Lawson in performance, Web. 53 Comments Update (30 Oct 2016): since I wrote this post, a bug was found in the benchmark which caused Rollup to appear slightly better than it would otherwise. However, the overall results are not substantially different (Rollup still beats Browserify and Webpack, although it’s not quite as good as Clos
Tree-shaking with webpack 2 and Babel 6
Rich Harris’ module bundler Rollup popularized an important feature in the JavaScript world: tree-shaking, excluding unused exports from bundles. Rollup depends on the static structure of ES6 modules (imports and exports can’t be changed at runtime) to detect which exports are unused. Tree-shaking for webpack is currently in beta. This blog post explains how it works. The project we are going to e
Setting up ES6
1. About this book 2. Deploying ECMAScript 6 2.1 Using ECMAScript 6 today 2.2 ES6 REPLs 2.3 Transpilation tools 2.4 Other useful ES6 tools and libraries 2.5 The future: native ES6 2.6 Are there ES6 features that can’t be transpiled to ES5? 3. Babel setups for browsers and Node.js 3.1 npm and local installs 3.2 Source maps 3.3 Browser setup: ES6 via webpack and Babel 3.4 Node.js setup: Dynamically
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - domenic/import-maps: How to control the behavior of JavaScript imports
RIP CommonsChunkPlugin.md
2.2.0-rc.4's es6 modules' "module" usage detection seems to be broken · Issue #3917 · webpack/webpack
Bugfix/disable module in harmony by sokra · Pull Request #3755 · webpack/webpack
GitHub - fuse-box/fuse-box: A blazing fast js bundler/loader with a comprehensive API :fire:
GitHub - sonicoder86/babel-webpack-tree-shaking: Tree-shaking example with Babel and Webpack
