Browser 上的 ESmodule & 現代化的前端構建工具 Snowpack / Vite

瀏覽器看得懂 import / export 耶!支援程度如何?對資深前端打工仔 aka 網頁開發者來說又有什麼改變?未來的打包趨勢跟當今的 solution 又有何不同呢?

大致上談幾件事

寫在前面

Browser 上的 import / export

<script type="module" src="js/index.js">
import helloworld from './helloworld.js'
helloworld()
export default ()=> {
console.log("hello world");
}
├── index.html
└── js
├── helloworld.js
└── index.js

ESModule 的 支援度如何?

ESModule 跟以往的體驗差異

ESmodule 對前端工程化的影響

Snowpack — modern bundler

// src/index.js// The below three is from node_modules
import rQUI from 'rQUI';
import carousel from 'rQUI.carousel';
import animation from 'rQUI.animation';
// The below one is what you create and import
import elements from './elements.js';
// _dist_/index.js
import rQUI from '/web_modules/rQUI/index.js';
import carousel from '/web_modules/rQUI.carousle/index.js';
import animation from '/web_modules/rQUI.animation/index.js';
├── _dist_
│ └── js
│ ├── elements.js
│ └── index.js
├── index.html
└── web_modules
├── rQUI
│ └── index.js
├── rQUI.carousel
│ └── index.js
└── rQUI.a
└── index.js

另外一個一樣風格的 build tool —Vite

後記

If any interest, 👉 https://realdennis.me.

If any interest, 👉 https://realdennis.me.