如何导出模块

How to export a module

本文关键字：模块 何导出      更新时间：2023-09-26

我开始从https://egghead.io/technologies/es6学习ECMAScript 6的方法，知道还有很多可能会改变的地方，但希望早点开始。

然而，当我按照教程说明(https://egghead.io/lessons/ecmascript-6-es6-modules-es2015-import-and-export)完全相同，我得到一个错误，我不知道我可能做错了什么。

Uncaught ReferenceError: require is not defined

Babel之后那行代码转换为ES5

"use strict";
var _distExporter = require("dist/exporter");
console.log("2 + 3=", (0, _distExporter.sumTwo)(2, 3));
//# sourceMappingURL=importer.js.map

开发人员提到CommonJS和WebPack作为解决方案，有些甚至提到了RequireJS，但在教程中没有任何地方说我应该编写代码或使用替代库。

我的HTML是this

<html>
<head>
  <script src="dist/importer.js"></script>
</head>
<body>
</body>
</html>

My importter .js is

import { sumTwo } from "dist/exporter";
console.log( "2 + 3=", sumTwo(2,3))

我的export .js是

function sumTwo(a, b){
  return a + b;
}
export { sumTwo };

我不知道我哪里出错了。我使用BabelJS (https://babeljs.io/)

如果您在Node下运行这段代码，而不是在浏览器中运行，您应该会看到预期的结果。Node理解CommonJS的请求调用，它会离开并为你抓取另一个文件。

浏览器不知道require是什么特殊的东西。但是我们可以使用一个工具让浏览器理解。下面是一个使用Browserify的例子，正如其他人提到的，你也可以使用WebPack，但我认为WebPack的学习曲线要陡峭得多。

首先你需要几个模块。

npm install -g browserify
npm install --save-dev babelify

然后我们可以像这样一起使用这些模块。

browserify main-file.js -o output-file.js -t babelify

这将遍历你的源文件，检查每个源文件中require的调用，并将它需要的其他文件添加到bundle中。然后运行Babel转换，将ES6转换为ES5。最后，它将所有这些都封装在一些代码中，以便在浏览器中工作。

相关文章：