在客户端使用 Babel 进行转译、导入和导出，不用 Webpack？

Posted 2023-02-22

【中文标题】在客户端使用 Babel 进行转译、导入和导出，不用 Webpack？

【英文标题】：Use Babel to transpile, import and export in the client, without Webpack?

【发布时间】：2016-11-05 02:29:57

【问题描述】：

我可以使用 Babel 编译 JSX 并通过全局命名空间导出 vars 吗？

我不想运行随机的 Webpack 服务器。

我已经开始关注 ES6、JSX、Babel 和 React，并且不在乎另一个使如此简单的任务复杂化的库

最终我想导出我的 React 类并导入另一个。从理论上讲，它应该只阻塞直到满足依赖项，我不明白这怎么可能是一种反模式，因为我所有的代码和外部依赖项都在本地缓存。

这是<script> 标签的默认行为，而不是<script type="text/babel">

<script type="text/babel">
    var message = "hello world";
</script>

<script type="text/babel">
    console.log(message); // undefined
</script>

我可以使用 ES6 导出和导入，但不能使用另一个随机文件服务器

【问题讨论】：

使用webpack不需要使用webpack server。看起来你把几件事弄混了。模块实现起来不是一件简单的事情，Webpack 和 Browserify 实现它们以在浏览器中使用。如果你想使用模块，你需要一些实现模块系统的东西。 Webpack 和 browserify 会生成一个简单的文件，您可以将其放入

默认情况下，浏览器内有一个 ES6 模块系统，Babel 似乎因为转译而中断。我读到 Babel 实际上删除了导入/导出，因为 ES6 规范说文件需要静态分析，原因不明

浏览器最终将支持 ES6 模块语法。在他们这样做之前，浏览器没有模块化 JS 的概念。你具体读了什么，在哪里读的？静态分析与 Babel 删除对导入/导出的支持有什么关系（它没有）？如果你想要模块，你需要某种系统来根据它们的依赖加载和执行模块。您的问题似乎是在问如何在没有它的情况下执行模块，这是矛盾的。

我在这里读到了medium.com/@kentcdodds/… 真的认为浏览器确实理解导入导出。我知道顺序脚本标签绝对可以共享 jQuery，例如

脚本标签不是 ES6 导入/导出。你对那篇文章有点误解。 Babel 移除的部分不是 ES6 模块，它是 Babel 5 做某事的一种特定方式。那篇博文特别提到了我的这个答案：***.com/a/33506169/785065，它解释了发生了什么变化。

【参考方案1】：

编辑：显然导出和导入功能已从 Babel 中删除。我不确定为什么，但它与 ES6 合规性和可能的​​安全性有关？

无论如何，如果您决定将它们放在单独的文件中用于开发目的：

将类放在共享对象（窗口）上

SuperClass.js 必须放在 SubClass.js 之前

class MySuperClass () 
    constructor (config) 
        super(config);
    


window.MySuperClass = MySuperClass;

---

var MySuperClass = window.MySuperClass;

class MySubClass extends MySuperClass () 
    constructor (config) 
        super(config);
    

我不确定这是否适用于需要 Babel 一段时间才能转换的大型类

目前看来还可以，如果我找到其他解决方案会更新