如何使用 babel 或任何其他工具转换 javascript import 语句

Question

我是这个 ES6 的新手。所以，我有如下困难：

我写了class TopoPlaneClass.js:

export default class TopoPlaneClass {

}

并将 {TopoPlaneClass} 导入到 3D.js 文件，如下所示

import {TopoPlaneClass} from "./topo/TopoPlaneClass.js";

喜欢TopoPlaneClass.js文件我有很多文件。

为了编译它，我使用如下：npm run build

package.json 文件:

"scripts": {    
    "build": "babel ./src/source -d compiled"
    
},

"scripts": {
    "build": "babel --presets es2015 src/source -d compiled"
},

以便class编译并保存在编译后的文件夹中

但是 3D.js 文件如下所示，并且 将此文件加载到浏览器时出现 require(...)

错误

var _TopoPlaneClass = require("./topo/TopoPlaneClass.js");

这里我不清楚该怎么做（如何转换文件以便 require 函数可用或解决依赖关系）？

Answer 1

TL;DR

Babel 仅将 import 语法翻译成其他语法，例如您的情况下的 CommonJS require。在撰写此答案时，用于使 require 调用在浏览器中工作的最常用工具是 webpack, parcel 等捆绑器

现代浏览器

导入声明是语言标准的一部分。在浏览器中，它们可以用于通过 <script> 标记包含的脚本中，其中 type 属性设置为 "module"，如下所示：

<script type="module" src="3d.js"></script>

您可以查看 here 目前哪些现代浏览器支持此功能。继续阅读不支持的浏览器。

转译语法

要继续使用新的导入语法编写代码，但要将其转换为在 ES 模块存在之前 JavaScript 中用于模拟模块的解决方案之一，您必须告诉 babel 哪种格式使用。默认情况下，es2015 预设将转换为所谓的 CommonJS 格式，从而导致 require 调用。使用 env 预设（也推荐使用 es2015），您可以从 modules field.

更改输出的模块格式

您使用

安装预设

npm install babel-preset-env

并在项目的根目录中创建一个 .babelrc 文件，内容如下：

{
  "presets": [["env", { "modules": "commonjs" }]]
}

（之后package.json中的--presets es2015也要去掉）

ESM 之前的模块

下一步取决于选择的解决方案。例如，如果您选择 amd，您将必须包含一个模块加载器，如 requirejs。如果你坚持使用 CommonJS，让它在浏览器中工作的一个非常常见的解决方案是将你的代码与像 webpack 这样的捆绑器捆绑在一起。

现代捆绑器所做的不仅仅是让 require 调用在浏览器中工作。它可能需要一些工作来设置，并且还会改变你应用 babel 的方式。 Browserify 是个例外，因为它只关注这一件事，不会对您的工作流程有太大改变。在选择使用哪一个之前，您必须考虑每个 trade-offs。

如何使用 babel 或任何其他工具转换 javascript import 语句

How to convert javascript import statement using babel or any other tool

requirejs

ecmascript-6

babeljs

TL;DR

现代浏览器

转译语法

ESM 之前的模块