Browserify import/require?

pan*_*hro 17 javascript browserify ecmascript-6

我正在尝试浏览浏览器,并通过了很多例子.

在一个例子中,我看到'import'的使用:

import 'jquery';
Run Code Online (Sandbox Code Playgroud)

和导入本地文件:

import Header from './Header';
Run Code Online (Sandbox Code Playgroud)

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

require('./Header');
Run Code Online (Sandbox Code Playgroud)

有什么不同?

JMM*_*JMM 25

require()是ES5中的节点模块系统(CommonJS).import是ES6模块语法.

如果你想浏览用ES6模块语法编写的模块,你需要使用像babelify(或其他方式的babel)之类的东西来编译它们.

  • @Matthias pre-ES6没有本机模块系统,因此在用户态代码中构建了多个系统(例如CommonJS/Node模块和AMD).`require()`是Node模块API的一部分.所以这是你可以编译到的"旧的JS环境理解的东西"之一(将在Node中运行).但是,浏览器不了解这些API.Node通过将模块包装在一个注入`require()`等的函数中来实现它.在浏览器中`require()`只是一个引用错误.Browserify使其在浏览器中工作,并将整个依赖图捆绑到一个脚本中. (4认同)
  • 不确定我理解.如果我通过Babel转换ES6,为什么我需要`browserify`(或`require`)?是不是将`import`语句转换为旧的JS环境可以理解的东西? (2认同)
  • 如果有人发布一个关于如何同时使用 browserify 和 babel 的示例或链接,那就太好了。 (2认同)