为什么Nodejs浏览器端模块加载有种官方没人管的感觉...

为什么Nodejs浏览器端模块加载有种官方没人管的感觉…

虽然有 SeaJS RequireJS 还有各种小的方案, 可是都不是官方的, 我是说浏览器的提供商, 这个问题想当然应该是从 C++ 层面去解决的呀 JS 出现这么久了, 火也活了好几年, Chrome 加的功能也超多. 可大型应用对模块化代码的依赖很强的吧… 结果迟迟没有… 觉得这事情不科学…

8 回复

为什么Node.js浏览器端模块加载有种官方没人管的感觉…

尽管已经有SeaJS、RequireJS等流行的解决方案，但这些都不是官方的标准。从某种意义上来说，这个问题似乎应该由浏览器提供商（如Chrome、Firefox等）来解决，毕竟JavaScript已经存在了很长时间，而这些浏览器也一直在添加新功能。

为什么感觉“官方没人管”？

  1. 缺乏标准化支持：

    • 在Node.js中，我们使用require语句来加载模块，这是内置的标准化方式。但在浏览器端，至今没有一个统一的标准化方式来处理模块加载。
    • 浏览器提供商主要关注的是提高性能、增加新的语言特性（如ES6+），以及安全方面的改进。因此，模块加载机制的标准化可能不是他们当前的重点。

  2. 社区驱动的解决方案：

    • 社区开发了一些非常优秀的模块加载库，比如SeaJS和RequireJS。它们提供了很好的模块加载解决方案，但它们并不是官方标准。
    • 示例代码：使用RequireJS加载模块
      <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
<script>
  requirejs(['moduleA'], function(moduleA) {
    moduleA.init();
  });
</script>

  3. ECMAScript Modules (ESM)：

    • 最近，ECMAScript Modules (ESM)已经成为一种标准，并且在现代浏览器中得到了支持。ESM允许开发者使用import和export关键字来声明模块之间的依赖关系。
    • 示例代码：使用ESM加载模块
      <script type="module">
  import { init } from './moduleA.js';
  init();
</script>
    • 尽管ESM是一个标准，但它仍然需要在服务器端进行一些配置（如设置正确的MIME类型）才能在生产环境中工作。

总结

虽然模块加载在浏览器端还没有得到官方的统一支持，但ECMAScript Modules (ESM)正在逐渐成为一种标准。社区也在不断推动相关的解决方案，使得开发者可以更好地管理模块化的代码。随着技术的发展，这种情况有望在未来得到改善。


主要问题在于各浏览器得兼容性

谁说没人管了。。 最新JS6标准就有支持~~

import { $ } from "jquery.js"
import { map, each } from "underscore.js"

浏览器支持有了么?

但感觉ES6的标准和当下的浏览器模块化实现差距比较大。

基本访的Python， 其实还不错啦。。

没有好，正在自成一套

Node.js 主要用于服务器端开发，而浏览器环境中的模块加载主要依赖于前端工具和库。Node.js 社区通常通过构建生态系统来支持模块加载，而不是直接由浏览器供应商来解决。

尽管浏览器供应商（如 Google 和 Mozilla）一直在推动 Web 技术的发展，但浏览器环境的模块加载标准目前仍处于发展阶段。ECMAScript 模块（ES Modules）是当前标准化的解决方案，它被纳入了 ECMAScript 规范中，并逐渐被各大浏览器所支持。

示例代码

以下是一个使用 ES 模块的简单示例：

main.js

import { add } from './math.js';

console.log(add(1, 2)); // 输出: 3

math.js

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

要在 HTML 文件中使用 ES 模块，可以这样写：

index.html

<!DOCTYPE html>
<html>
<head>
    <title>ES Module Example</title>
</head>
<body>
    <script type="module" src="./main.js"></script>
</body>
</html>

解释

  • Type=“module”: 这个属性告诉浏览器 <script> 标签内的代码应该作为 ES 模块处理。
  • 导入和导出: 使用 import 和 export 关键字来实现模块的导入和导出功能。

ES 模块是现代 JavaScript 的标准模块系统，正在逐步获得更广泛的支持。尽管目前仍有一些浏览器可能需要通过配置或 Polyfill 来支持，但这代表了未来发展的方向。

回到顶部