Browserify中的import/require？

Question

我试着学习使用 Browserify，已经浏览了很多示例。

在其中一个示例中，我看到了 'import' 的使用：

import 'jquery';

使用以下方式导入本地文件：

import Header from './Header';

但在其他例子中，我看到人们通过以下方式进行导入：

require('./Header');

什么是区别？

- panthro

Answer 1

require() 是 ES5 中的 Node 模块系统 (CommonJS)。而 import 则是 ES6 模块语法。

如果你想使用 ES6 模块语法编写的模块进行 browserify，你需要使用类似 babelify (或其他方式的 babel) 来编译它们。

- JMM

---

我不确定我理解了。如果我通过Babel转译ES6，为什么我需要browserify（或者require）呢？这难道不是将import语句转换为旧的JS环境可以理解的内容吗？ - mxk

在ES6之前，JavaScript没有原生的模块系统，因此在用户代码中构建了多个系统（例如CommonJS / Node模块和AMD）。require()是Node模块API的一部分。因此，它是可以编译成旧版JavaScript环境所理解的目标之一（可在Node中运行）。但是，浏览器不了解这些API。Node通过将模块包装在一个函数中来实现它，该函数注入require()等内容。在浏览器中，require()就只会产生一个引用错误。Browserify使其在浏览器中运行，并将整个依赖关系图捆绑到单个脚本中。 - JMM

明白了。谢谢你的澄清！ - mxk

@Matthias 没问题！ - JMM

有人能够发布一个如何同时使用Browserify和Babel的示例或链接就太好了。 - joedotnot