详解require和import

文章目录

    • 起源
    • 端限制
    • 解析差异
    • 输出差异
    • require 相关的用法
    • import/export 用法
      • export
      • import
      • export default
      • import()函数
        • 用法
        • import()函数适用场合
          • 按需加载
          • 条件加载
    • require 与 import的差异
      • 引用与使用
      • 作用域区别
      • 是否严格模式

当前端应用越来越复杂时,我们想要将代码分割成不同的模块,便于复用、按需加载等。

requireimport 分别是不同模块规范下引入模块的语句,下文将介绍这两种方式的不同之处。

起源

年份 出处
require/exports 2009 CommonJS
import/export 2015 ECMAScript2015(ES6)

端限制

require/exports import/export
Node.js 所有版本 Node 9.0+(启动需加上 flag --experimental-modules) Node 13.2+(直接启动)
Chrome 不支持 61+
Firefox 不支持 60+
Safari 不支持 10.1+
Edge 不支持 16+

CommonJS 模块化方案 require/exports 是为服务器端开发设计的。服务器模块系统同步读取模块文件内容,编译执行后得到模块接口。(Node.js 是 CommonJS 规范的实现)。

在浏览器端,因为其异步加载脚本文件的特性,CommonJS 规范无法正常加载。所以出现了 RequireJS、SeaJS 等(兼容 CommonJS )为浏览器设计的模块化方案。直到 ES6 规范出现,浏览器才拥有了自己的模块化方案 import/export。

两种方案各有各的限制,需要注意以下几点:

  • 原生浏览器不支持 require/exports,可使用支持 CommonJS 模块规范的 Browsersify、webpack 等打包工具,它们会将 require/exports 转换成能在浏览器使用的代码。
  • import/export 在浏览器中无法直接使用,我们需要在引入模块的

你可能感兴趣的:(JavaScript,javascript)