Question

我是这个Es6的新手。所以，我有下面的困难： -

我写过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"
    },

这样该类将编译并存储在已编译的文件夹中。

但3D.js文件如下所示，将此文件加载到浏览器时给出了require（...）的错误

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

*这里我不清楚怎么做（如何转换文件以便需要函数可用或依赖解析）？ *

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是一个例外，因为它只关注这一点并且不会改变您的工作流程。在选择使用哪一个之前，您必须考虑每个的权衡。

如何使用babel或任何其他工具转换java脚本导入语句

1 个答案:

TL; DR

现代浏览器

汇总语法

ESM之前的模块