JavaScript中的模块化

Question

我知道如果浏览器要渲染多个有标识符的JS文件，全局作用域会被这些标识符污染。我也知道避免这种情况的方法之一是使用模块，它们（在我看来）只是具有上述标识符成员的对象，从而模仿了C++命名空间。我还在学习Node.js，它有一个内置的模块系统可以简化这个任务，所以我的问题是：如何在发送给浏览器进行渲染的JS文件中使用模块？

谢谢。

- Bran Tran

Answer 1

工具像 browserify 和 WebPack 就是你要找的（我个人更喜欢 browserify）。看看 这个答案，它解释了很多你的疑虑。

在 Node.JS 中，你可以使用 module.exports 关键字导出一个模块，但你不能仅仅通过在 <script> 标签中引用它们来在浏览器中导入这些模块。那是因为浏览器不理解模块系统，并且所有东西都在全局的 window 对象上下文中工作，所以 module.exports 简单地变成了 window.module.exports，我确定你不想要这样。因此，你需要使用像 browserify 这样的工具将 Node.JS 脚本处理成浏览器能够理解的东西。

- Prahlad Yeri

---

谢谢你的回答。我对这个领域一无所知，因为我并没有理解你给出的链接中的大部分内容。你能推荐一些资源给我，以便我能够对JavaScript/Node.js有一个整体的了解，并了解它们之间的关系吗？谢谢。 - Bran Tran

别担心，我们都是学习者！我的建议是一步一步来，不要一下子就涉及浏览器和Node。Mozilla Docs 是学习核心JavaScript的好资源——例如事件、回调和Promise等，这些你应该首先掌握。在此之后，Node就不会那么难了。Node docs 是一个很好的资源，一旦你理解了基础知识。除此之外，根据你的需求，浏览有用的库（如jquery、angular等）的文档也很有用。 - Prahlad Yeri

Answer 2

这个问题通常可以通过模块打包工具或者模块加载器来解决（例如Webpack、Browserify、RequireJS）。它们能够理解你的JS模块之间的关系，跳过未使用的模块，并且生成适用于浏览器的输出。如果你遵循一些约定，就不需要过多担心全局作用域。

在ES6之前，有两种不同的方法被广泛应用：

CommonJS：

var module = require('my-module');

来自 Node.js 广为人知

AMD:

define(['jquery'] , function ($) {
    return function () {};
});

由于其设计支持模块的异步加载，因此它非常适合浏览器使用。

随后，ES6引入了对模块的本地支持：

import * as lib from 'lib';

新技术在Web中的主要问题是，通常需要支持多种浏览器，这长期以来阻止了开发人员使用新功能。现在，我们有代码转译器和复杂的代码打包工具（例如Webpack）。借助它们的帮助，您可以使用最新版本的语言，编译和打包您的代码，并生成单个“bundle.js”文件，该文件支持旧版浏览器，但执行时间会变慢。

- wirher