javascript，从js文件导入数组

Question

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

file1.js：

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

file2.js：

import { array } from 'file1'

我的闲置说“当前的Javascript版本不支持导入声明。”我该如何导入这个数组？

感谢您的任何帮助

Answer 1

正如您链接的文章所述，import可与ES6一起使用。

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

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

Answer 2

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

用法是这样的：

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

});

实现将是这样的：

function import(filePath, varName, callback){
    //create iframe
    //create script tag
    //add filepath and onload handler
    script.onload = function(){
        //retrieve variable and
        //trigger callback in parent
    };
}

Answer 3

importing只允许在ES6中使用，这是javascript的最新版本。浏览器刚刚开始能够“理解”ES6，他们将无法完全理解它一段时间。目前，浏览器了解以前版本的javascript，ES5，确实很好。那么你如何编写使用import的代码，因为它是ES6？

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

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

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

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