模块开发者使用 ES Modules 的正确姿势

这里指的 ES Modules (esm)是指源代码中使用 'import','export' 方式导入或导出模块.

这种方式成为标准已经好几年了, 各大浏览器厂商全部支持这种写法:

<script type="module">
import mod from 'https://dev.jspm.io/npm:some-module';
</script>
复制代码

问题: 模块开发者发布什么样的的文件才能最好的支持这种方式.

我们知道以往的通用做法是使用 require, module.exports, 如果你的模块是这种方式, 那 jspm.io 可以解决多数兼容性问题(毕竟具体写法有很多, jspm 不一定能全部理解和正确处理).

显然 jspm 为这种加载方式付出了额外的工作, 服务器端进行转换, 二次包装, 甚至多次请求.

那么如何使这种成本最低, 也就是所谓的正确姿势?

两种方法:

采用同时兼容 CJS 和 esm 的格式, 优点: 一个文件解决兼容性
分离文件, '.js' 文件使用传统 CJS 风格, '.mjs' 文件使用 esm 格式, 优点: 干净

第一种方式的例子: https://unpkg.com/@babel/parser@7.0.0-beta.48/lib/index.js

这是社区使用的兼容方式: Object.defineProperty(exports, '__esModule', { value: true });

第二种会有两个文件: '.js' 和 '.mjs' 的, 其中 '.js' 的不包含 'import','export', '.mjs' 至少要包含 'export'

打包工具通常都支持多种方式(打包工具就是干这个的), 比如 rollupjs

糟糕的方法:

扩展名是 '.js', 里面却使用了 'import','export'. 正如前文所述, 会增加加载成本, 这方法过时了.

扩展名是 '.mjs' 里面却使用 'require' 或者没有使用 'export'. 这完全误用了 '.mjs', 这样用就失去了 '.mjs' 被创造出来意义.

现实中, 很多项目在打包的时候不会考虑到加载成本, 这是一种惯性, 随着时间的推移可能会改变, 也可能会更糟糕. 因为如果多数开发者都不在乎 '.mjs' 这个扩展名的话, 问题只会越来越混乱.

模块开发者使用 ES Modules 的正确姿势相关推荐

2020年我们可以在Node中使用ES Modules了吗
1 前言不同时期的的 JS 发展,诞生了不同的模块化机制:近些年,随着前端模块化的标准落地,不同端的 JS 对此也都做了各自的实现.今天我们就来聊聊这个话题. 本文我们将主要探讨以下四个方面: Ja ...
快速入门Web前端开发的正确姿势
入门标准很简单,就一条:达到能参与 Web 前端实际项目的开发水平.请注意,是实际项目,这就需要了解如今的实际项目开发都用了哪些技术栈.HTML/CSS/JavaScript 这三大基础技术栈肯定是需 ...
开发函数计算的正确姿势 —— 移植 next.js 服务端渲染框架
为什么80%的码农都做不了架构师?>>> 首先介绍下在本文出现的几个比较重要的概念: 函数计算(Function Compute): 函数计算是一个事件驱动的服务,通过函数计算 ...
这样才是代码管理和 Commit 的正确姿势 | 研发效能提升36计
简介:效能提升从小习惯开始,这样才是代码管理和 Commit 的正确姿势! 专栏策划|雅纯志愿编辑|张晟软件交付是以代码为中心的交付过程,其中代码的作用有几点:第一,最终的制品要交付成什么样,需要 ...
使用R语言的正确姿势，R包干货奉献
生物信息学习的正确姿势 NGS系列文章包括NGS基础.在线绘图.转录组分析 (Nature重磅综述|关于RNA-seq你想知道的全在这).ChIP-seq分析 (ChIP-seq基本分析流程).单细胞 ...
GitHub 热点速览：刷 LeetCode 的正确姿势！
作者 | HelloGitHub-小鱼干责编 | 郭芮找对路子,事半功倍,正如本周 GitHub Trending #刷 LeetCode# 主题想表达的那般,正确的学习姿势方能让人走得更远,走进 ...
GitHub 热点速览 Vol.18：刷 LeetCode 的正确姿势
作者:HelloGitHub-小鱼干摘要:找对路子,事半功倍,正如本周 GitHub Trending #刷 LeetCode# 主题想表达的那般,正确的学习姿势方能让人走得更远,走进大厂 ???? ...
【AI创新者】TensorFlow 贡献者唐源：掌握 Google 深度学习框架的正确姿势
自 2015 年底开源到如今更快.更灵活.更方便的 1.0 版本正式发布,由 Google 推出的第二代分布式机器学习系统 TensorFlow 一直在为我们带来惊喜,一方面是技术层面持续的迭代演进, ...
论做 AI 芯片的正确姿势
https://xie.infoq.cn/article/d5ab8bea53fa8a08406fabf9d 论做 AI 芯片的正确姿势作者:flow 2020-08-10 本文字数:14908 字 ...

模块开发者使用 ES Modules 的正确姿势

模块开发者使用 ES Modules 的正确姿势相关推荐

最新文章

热门文章