关于es6模块化规范使用的简单介绍及一些回顾

写在前面

距离 tc39 推出原生的模块化解决方案已经有一段时间了，新的工作中也一直在使用，现在对以往的使用做一个简单的回顾和介绍。

一般应用

一般来说，我们都是在编写大型应用或者多模块类库源码的过程中使用原生模块化解决方案来组织我们的代码，然后再借助 webpack 或者 rollup 等构建工具分析打包，生成我们最终能够使用在生产环境上的代码，来达到一个高质量开发，高性能应用的目的。列一个简单的场景大致如下：

1, 源码编写

module1.js(无任何依赖的模块一)

export function module1() {
  console.log('this is module1');
}

module2.js(无任何依赖的模块二)

export default function module2() {
  console.log('this is module2');
}

index.js(对外打包得主文件)

// 可能有人会好奇我这里的导入方式或者上面module的导出方式写法不一样感到到困惑，明白这几种写法的可以自行略过，有疑惑的可以查看下面网站补习一下：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/export，https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/import
import { module1 } from './module1.js';
import module2 from './module2.js';

module1();
module2();

2, 工具打包

根据代码量及代码语言的类型和最后打包出来所期望的效果（兼容性等），打包构建其实是一个非常复杂的又脏又累的过程，好在已经有很好地工具来帮我们做这件事情，但根据工具的不同，配置的不同，最终的代码也会有所差异，这里不做展开，下面的结果是我使用rollup，umd 规范（后续会有博客对 umd 规范相关内容做一个简单介绍）打包来做的一个简单示范，效果如下：

bundle.js(打包后最终生成的文件)

(function(factory) {
  typeof define === 'function' && define.amd ? define(factory) : factory();
})(function() {
  'use strict';

  function module1() {
    console.log('this is module1');
  }

  function module2() {
    console.log('this is module2');
  }

  module1();
  module2();
});

浏览器应用

es 模块化作为一个原生的规范，截止目前 2019-11-07，各大宿主浏览器的最新版本直接兼容的情况已经不错，具体大家可点击这里查看,下面也基于上文写一个简单的浏览器中直接应用的例子。

1, 模块代码编写

与上文中的源码编写完全相同。

2, 引入

index.html

<script type="module" src"./index.js"></script>

思考

我想历史早已经证明，随着语言的发展，只要它的某方面足够健壮，那么对于语言这方面辅助的工具哪怕曾经再流行，再风靡，也迟早会慢慢退出历史的舞台。

那到了浏览器 es 模块化规范支持越来越好的今天或者说是未来，我们是否可以摒弃构建工具的一些功能，让原生的模块直接运行在浏览器上呢，让我们拭目以待。

资料地址

本文由陈曦宇创作，采用知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名
最后编辑时间为: Nov 9, 2019 at 08:57 am