如何导出模块

Question

I started learning from https://egghead.io/technologies/es6 the ECMAScript 6 way, knowing there is still a lot that might change, but wanted to get a early start. 我从ECMAScript 6的方式从https://egghead.io/technologies/es6开始学习，知道仍然有很多地方可能会改变，但我希望早日开始。

However, when I follow the tutorial instructions on ( https://egghead.io/lessons/ecmascript-6-es6-modules-es2015-import-and-export ) exactly the same, I get an error which I have no idea what I might have done wrong. 但是，当我完全按照（ https://egghead.io/lessons/ecmascript-6-es6-modules-es2015-import-and-export ）上的教程说明进行操作时，出现错误，我不知道该怎么办我可能做错了。

Uncaught ReferenceError: require is not defined 未捕获的ReferenceError：require未定义

Code on that line after Babel converted to ES5 将Babel转换为ES5之后的那一行代码

"use strict";

var _distExporter = require("dist/exporter");

console.log("2 + 3=", (0, _distExporter.sumTwo)(2, 3));
//# sourceMappingURL=importer.js.map

Developers are mentioning CommonJS and WebPack as a solution some even mentioned RequireJS, but nowhere in the tutorial did it state I should should code or use alternative libraries. 开发人员提到CommonJS和WebPack作为解决方案，甚至有人提到RequireJS，但是在本教程中没有任何地方指出我应该编写代码或使用其他库。

My HTML is this 我的HTML是这个

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

</body>
</html>

My importer.js is 我的importer.js是

import { sumTwo } from "dist/exporter";

console.log( "2 + 3=", sumTwo(2,3))

And my exporter.js is 我的exporter.js是

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

export { sumTwo };

I have no idea where I'm going wrong. 我不知道我要去哪里错了。 I'm using BabelJS ( https://babeljs.io/ ) 我正在使用BabelJS（ https://babeljs.io/ ）

Answer 1

If you run this code under Node, rather than in a browser, you should see the results you are expecting. 如果在Node（而不是浏览器）下运行此代码，则应看到预期的结果。 Node understands CommonJS require calls and will go away and grab that other file for you. Node了解CommonJS需要调用，并且会消失并为您获取该其他文件。

The browser has no idea that require is anything special. 浏览器不知道require是什么特别的东西。 But we can use a tool to make the browser understand. 但是我们可以使用一种工具来使浏览器理解。 Here's an example with Browserify , as some other people have mentioned you can also use WebPack , but I think the learning curve for WebPack is a lot steeper. 这是Browserify的示例，就像其他人提到的那样，您也可以使用WebPack ，但是我认为WebPack的学习曲线要陡峭得多。

First you'll need a couple of modules. 首先，您需要几个模块。

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

Then we can use these modules together like this. 然后我们可以像这样一起使用这些模块。

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

This will walk your source files checking calls to require in each one and adding the other files that it requires to the bundle. 这将遍历您的源文件，以检查每个请求中的要求并将其需要的其他文件添加到捆绑中。 Then it runs the Babel transform over it, to convert ES6 to ES5. 然后，对其运行Babel转换，以将ES6转换为ES5。 Finally it wraps it all up in some code that lets require work in a browser. 最后，它将所有内容包装在一些代码中，这些代码允许在浏览器中进行工作。

如何导出模块

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-09-01 08:49:35

如何导出模块

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-09-01 08:49:35

解决方案1
1 已采纳 2015-09-01 08:49:35