Question

我正在尝试将数组从js文件导入到另一个js文件中。 link例如：

file1.js：

var array = ['one', 'two', 'three'];

file2.js：

import { array } from 'file1'

我的空闲时说当前Javascript版本不支持导入声明。＆＃34;如何导入此数组？

感谢您的帮助

Answer 1

正如您链接的文章所述，import可用于 ES6 。

我认为你正在编写ES5 JavaScript，然后你需要一个像Babel这样的ES6转换器。

https://codeburst.io/es5-vs-es6-with-example-code-9901fa0136fc

Answer 2

我认为在ES5中复制行为的最佳方法是创建一个带有脚本标记的iframe到您想要的文件。在Onload上，您可以获取所需的变量并将其带入父窗口。然后销毁iframe。

用法是这样的：

redirect_to

实施将是这样的：

import('file-url', 'variable-name', function(imported){

});

Answer 3

import只允许在ES6中使用，这是最新版本的javascript。浏览器刚刚出现，能够理解＆＃34; ES6，他们不能完全理解它一段时间。目前，浏览器了解以前版本的javascript，ES5，确实很好。那么如何编写使用import的代码，因为它是ES6？

不幸的是，您需要一些特殊工具来更改您在ES6中编写的代码到ES5，以便浏览器可以理解您的代码。这称为 transpiling 。一种名为Babel的工具是目前使用最流行的转换器。但那还不是全部。您需要另一个工具捆绑您使用ES6语法编写的模块。 Rollupjs和Webpack是此任务最受欢迎的工具。

可能需要几周的时间阅读并尝试学习这些工具，所以不幸的是，我无法在一个答案中对它们进行充分的解释，以便您获得完整的理解。基本上捆绑的功能，使用您的示例：file1.js和file2.js将合并为一个单个最终文件bundle.js，这是您在html中包含<script src="bundle.js">的文件。 file2.js称为模块。这个新的帮助如何编写更好的代码？好吧，我们可以在 modules 中编写大部分代码，然后只需import在特定页面上我需要的任何模块。如果我需要page1.html上的倒数计时器，我将创建一个模块，其中包含倒数计时器所需的代码，以及import倒数计时器模块。如果我需要在6个月后的新页面上使用倒数计时器，我将在这个新页面上import倒数计时器模块。代码可重用性。

Webpack比Rollup更受欢迎，但我建议使用Rollup来很好地了解捆绑器的实际功能。事实上，我们在企业应用程序中使用Rollup，尽管我认为Webpack的使用范围更广，因为除了捆绑之外它还有许多其他的东西。

注意：ES6并不是最新版本的javascript;我们已经有ES7和ES8了。实际上，官方javascript语言中不断添加新功能。问题是浏览器需要时间来实现（能够理解＆＃34;）这些新功能。

javascript，从js文件

3 个答案: