Using npm modules with ES6 and Future of npm/bundlers

2024/2/27 8:15:12

I use ES6 for a while and have no experience with npm or node.js.

I want to use some npm modules in my project using ES6.

I tried following and got an error

import {axios} from './axios.js';

The requested module './axios.min.js' does not provide an export named 'axios'

I am trying to use https://github.com/axios/axios/blob/master/dist/axios.js

I do not want to use <script src="..."></script> tag implementation. I want to to load it on demand with ES6 modules.

Is there any helper script to adapt npm modules to ES6 or any solution?

Answer
import {axios} from './axios.js';

would require Axios to have a named export like

export function axios(...params) { ... }

Axios does have a default export though, which you import without the curly braces:

import axios from './axios.js';

For imports to work in a browser, you need to declare the importing script with type="module":

<script type="module" src="./js/main.js"></script>

Edit:

Checking that URL you gave it seems Axios does not provide an ECMAScript module at all. Importing the way I described will work as long as you're using something like webpack to bundle your scripts.

Edit 2:

I have just filed an issue on the Axios repository regarding the topic: https://github.com/axios/axios/issues/1879

Edit 3 (April 2021):

Three years forward, even Node.js supports ES Modules, but Axios seems stuck on an old code base that looks unlikely to ever get updated, which causes problems when you want to use Axios along with Vue.js 3/Vite build stack, or Svelte.

A 20% the size but not all the features (e.g. interceptors are missing) rewrite in ES6 including proper exports is available with redaxios.

http://en.ppmy.cn/q/42405.html

Related Q&A

Alternative for the ActiveX object for the other browsers excluding IE?

Can anyone help me as i am stuck in creating a file(temporary) with extension(say .csv) in the local disk, i tried using ActiveX object but it works fine only in internet explorer,got a error when i tr…

Capture keypress in Javascript (Google Docs)

Im trying to write a little greasemonkey script/bookmarklet/what have you for Google Docs. The functionality Id like to add needs a keypress/keyup/keydown event handler (one of those three). Unfortunat…

What is the proper to write a global const in javascript es6?

What is the right way to write a global const in a script in javascript es6 and use it in some other script?

JS FTP web directory filelist

Is it possible to use Javascript to invoke a FTP call to a specified URL and retrieve all files in this webdirectory?...

dynamically loaded js function does not appear in Firebug js debugger

There is a page1.html (I open it in browser):<div id="content"> </div> <script type="text/JavaScript">jQuery.ajax({type : "GET",url : page2.html,dataType…

How to position a fixed-location element on IOS browser when zoomed?

I have a nice little React drag-drop library that works for mouse- and touch systems. For touch, it grabs the touch location via clientX and clientY (e.targetTouches[0].clientX, e.targetTouches[0].clie…

JQuery Mobile file upload [closed]

Its difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying thi…

Google Maps Android Studio - how disable the map controls?

Im working in Android Studio with MapsActivity. Everything works fine, but how do I disable the map controls that show up on top of the Google map?Here is my code:public class MapsActivity extends Fra…

Is it possible to hide URL bar in iOS 9 (Safari browser) by using JavaScript?

I want to hide the URL bar from my single-page application by using JavaScript.I tried to set bigger height of the body element and then perform:window.scrollTo(0, 0);But it doesnt work. The URL bar is…

Evaluate in PhantomJS doesnt seem to work

I have a problem with JavaScript magic. When I execute this code:var page = require(webpage).create(); var url="http://google.com"; page.open(url, function (status){if (status!== "succes…