Skip to content

Latest commit

 

History

History
428 lines (304 loc) · 6.61 KB

esm-talk.md

File metadata and controls

428 lines (304 loc) · 6.61 KB
layout theme background class highlighter lineNumbers info
center
seriph
text-center
shiki
false
## 从ES modules 看 JavaScript 的发展和演化

从ES modules 看 JavaScript 的发展和演化

Press Space for next page

TOC

  • 🎨 1. the history (1989~2015)
  • 💻 2. esm 兼容性
  • ✏️ 3. esm 使用
  • 📤 4. 展望


<style> h1 { background-color: #2B90B6; background-image: linear-gradient(45deg, #4EC5D4 10%, #146b8c 20%); background-size: 100%; -webkit-background-clip: text; -moz-background-clip: text; -webkit-text-fill-color: transparent; -moz-text-fill-color: transparent; } </style>

1. the history (1989~2015)

1989~1991, the web

1996, JavaScript(Netscape)

1999, ES3

  • regex
  • try...catch
  • ...

2003, ES4 draft

  • classes
  • module
  • optional type annotations & static types
  • generators & iterators
  • destructuring assignment
  • ...

2008, Chrome(google)

2009/11/8, Node.js(Ryan Dahl)

  • commonjs
var foo = require("foo");
// ...
module.exports = {
  bar: function(){
    // ...
  }
}

2009/12/9, ES3.1 (ES5)

  • strict mode
  • getters & setters
  • JSON
  • ...
foo = 0;
console.log(foo); // ?
var foo = 0;
console.log(window.foo); // ?
function foo(){
  this.bar = "bar";
}

foo(); //?
var foo = 0;

foo.bar = "bar"; //?
var mod = (function mod(){
  var local = '....';
  var foo = function foo(){ return local;}
  //...

  return {foo};// exported mod
}());

严格模式

"use strict";

foo = 0;
console.log(foo);

2015, ES2015(aka ES6)

  • es modules
  • classes
  • generators & iterators
  • destructuring assignment
  • ...

modules: iife => commonjs => esm

var $ = (function(){
  var jquery = function(){};
  //...
  return jquery;
}());

var $ = require('jquery');
module.exports = $;

import $ from 'jquery';
export default $;
<style> .footnotes-sep { @apply mt-20 opacity-10; } .footnotes { @apply text-sm opacity-75; } .footnote-backref { display: none; } </style>

为什么要使用 es modules?

2.1 兼容性(浏览器)

2.2 兼容性(Node.js)

2.3 兼容性(toolings)

工具 支持情况
babel ✅
webpack ✅
eslint ✅
rollup ✅
Typescript ✅(ts v4.5 beta)
mocha ✅
jest 🚧

3.1 使用 babel/typescript + webpack/rollup/parcel

{
  "presets": ["@babel/preset-env"],
}
{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
  }
}

3.2 使用原生esm(Web)

<script>alert('stop!!!!!');</script>
<div>hello!</div>
<script type="module">alert('stop!!!!!');</script>
<div>hello!</div>

3.3 使用原生esm(Node.js)

3.3 使用原生esm(Node.js)

3.4 使用原生esm(Node.js)

3.5 使用原生esm(Node.js)

4.4 使用原生esm(Node.js)

  1. 使用 "type": "module" 或 *.mjs
  2. 使用 .js/.mjs(e.g. import foo from "./foo.js")
  3. 使用 pkg.exports(dual-mode)
  4. 在 esm 中引入 cjs ✅
  5. 在 cjs 中引入 esm ❌

4. 展望

Q: esm 相关？

  • import()
  • import.meta

Q: esm的未来？

Q: The TC39 Process?

  • 🤷🏻 Stage 0: Strawperson
  • 💡 Stage 1: Proposal
  • ✍🏻 Stage 2: Draft
  • 📝 Stage 3: Candidate - almost final
  • 🎖 Stage 4: Formal standard

QA

参考文献

  1. https://jakearchibald.com/2017/es-modules-in-browsers/
  2. https://caniuse.com/
  3. https://nodejs.org/
  4. https://www.typescriptlang.org/docs/
  5. https://devblogs.microsoft.com/typescript/announcing-typescript-4-5-beta/#esm-nodejs
  6. https://blog.sindresorhus.com/get-ready-for-esm-aa53530b3f77
  7. https://gils-blog.tayar.org/posts/using-jsm-esm-in-nodejs-a-practical-guide-part-1/
  8. https://gils-blog.tayar.org/posts/using-jsm-esm-in-nodejs-a-practical-guide-part-2/
  9. https://tc39.es/process-document/