javascript, import array from js file - Stack Overflow

admin管理员组

文章数量:1431426

I am trying to import array from js file to another js file. link For example:

file1.js:

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

file2.js:

import { array } from 'file1'

My idle says that "import declaration are not supported by current Javascript version." How can I import this array?

Thank You for any help

I am trying to import array from js file to another js file. link For example:

file1.js:

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

file2.js:

import { array } from 'file1'

My idle says that "import declaration are not supported by current Javascript version." How can I import this array?

Thank You for any help

• javascript

Share Improve this question Follow asked Dec 18, 2017 at 22:39 gongarekgongarek 1,04411 gold badge1111 silver badges2020 bronze badges 3

• If you are using ES6 you can create a class in file1.js, export that class and access your array via a new instance of that class in file2.js. – JDK92 Commented Dec 18, 2017 at 22:43
• 2 @JDK92 you can also export variables, functions and constants. You don't need a class at all for this. – Thomas Commented Dec 18, 2017 at 22:45
• That's right, sorry! Should have mentioned it. I'm just a fan of classes when it es to stuff like this. Thanks for following up my ment! – JDK92 Commented Dec 18, 2017 at 22:47

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

As mentioned by article you linked, import is available with ES6.

I think you're writing ES5 JavaScript, then you'll need a ES6 transpiler such as Babel.

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

importing is only allowed in ES6, the newest version of javascript so to speak. Browsers are just now getting around to being able to "understand" ES6, and they won't be able to understand it pletely for awhile. Currently, browsers understand the previous version of javascript, ES5, really well. So how can you write code that uses import since it's ES6?

Unfortunately, you need some special tools that change code that you write in ES6 to ES5 so that browsers can understand your code. This is called transpiling. A tool called Babel is by far the most popular transpiler used today. But that's not all. You'll need another tool to bundle the modules you write in ES6 syntax. Rollupjs and Webpack are the most popular tools for this task.

It can take a few weeks of reading and trying things out to learn these tools, so unfortunately I can't explain them well enough in one answer here for you to get a plete understanding. Basically what bundling does, using your example: file1.js and file2.js will be bined into one single final file bundle.js and this is the file that you will include <script src="bundle.js"> in your html. file2.js is called a module. How does this new help write better code? Well we can write most of our code in modules and then just import whatever modules I need on particuler pages. If I need a countdown timer on page1.html, I'll create a module which has the code needed for a countdown timer, and import the countdown timer module. If I need a countdown timer on a new page 6 months from now, I will just import the countdown timer module on this new page. Code reusability.

Webpack is more popular than Rollup, but I would remend using Rollup to get a good overview of what a bundler actually does. We use Rollup in our enterprise application in fact, although Webpack is more widely used I think, as it does many many things beyond bundling.

Note: ES6 is not really the newest version of javascript; we already have ES7 and ES8 ing along. In fact, there are new features constantly being added to the official javascript language. The problem is that it takes time for browsers to implement (be able to "understand") these new features.

The best way I can think to replicate the behavior in ES5 is to create an iframe with a script tag to the file you want. Onload you can grab the desired variable and bring it into the parent window. Then destroy the iframe.

Usage would be something like this:

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

});

Implementation would be something like this:

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
    };
}

本文标签： javascriptimport array from js fileStack Overflow