通过脚本标签的ES6模块具有错误“所请求的模块未提供名为'default'的导出". [英] ES6 modules via script tag has the error "The requested module does not provide an export named 'default' "

问题描述

我尝试通过脚本标签导入模块，

<script type="module">
        import phonebar from "https://unpkg.com/jssip-emicnet/dist/phonebar.js"

我遇到了错误

请求的模块 ' https://unpkg.com/jssip-emicnet/dist/phonebar.js'不提供 导出名为默认"的

The requested module 'https://unpkg.com/jssip-emicnet/dist/phonebar.js' does not provide an export named 'default'

我将其更改为所谓的仅出于副作用导入模块"，并且按预期工作.

I changed it to so-called "Import a module for its side effects only" and it worked as expected.

 <script type="module">
        import "https://unpkg.com/jssip-emicnet/dist/phonebar.js"

MDN 说import '/modules/my-module.js';是

导入整个模块仅用于副作用，而无需导入 任何事物.这将运行模块的全局代码，但实际上并没有 导入任何值.

Import an entire module for side effects only, without importing anything. This runs the module's global code, but doesn't actually import any values.

这些话对我来说没有意义. 另外，如果我使用npm + webpack来建立一个简单的项目. npm i jssip-emicnet然后我可以在我的js代码中正确导入phonebar.

Those words did not make sense to me. Beside, if I use npm+webpack to set up a simple project. npm i jssip-emicnet then I can import phonebar correctly in my js code.

import phonebar from 'jssip-emicnet/dist/phonebar';

那我为什么不能通过浏览器中的<script>标记导入它?

So why can't I import it via <script> tag in browser?

我实际上是jssip-emicnet的作者. phone.js就是这样

I am actually the author of jssip-emicnet. The phone.js is like this

class Phone {
  ...
}
export default Phone

我的webpack输出设置是这个

And my webpack output setting is this

entry: {
    phonebar: './src/ui/phone.js'
},
output: {
    path: path.resolve(__dirname, './dist'),
    filename: '[name].js',
    libraryTarget: 'umd',
    libraryExport: 'default',
    umdNamedDefine: true,
    library: '[name]'
},

所以我不确定是否是因为我错过了有关Webpack设置的信息.

So I am not sure if it is because I miss something about my webpack setting.

-----更新-----

----- update -----

有了评论，我发现了这个使用webpack输出ES模块

With the comments I got I found this Output an ES module using webpack

问题与webpack 2有关，我正在使用webpack 4，但由于此问题仍未解决 https://github.com/webpack/webpack/issues/2933 也许webpack尚不支持.

The question was about webpack 2 and I am using webpack 4 but since this issue is still open https://github.com/webpack/webpack/issues/2933 maybe webpack has not supported that yet.

UMD与JavaScript模块不兼容还有助于解释umd和es6模块

UMD is not compatible with JavaScript modules also helps to explain umd and es6 module.

推荐答案

起初，我认为您的导入不正确

默认导出的名称为Phone.

class Phone {
  ...
}
export default Phone

在代码中，您正在从模块中请求phonebar变量，这不是默认的导出值.这将引发错误. 尝试将phonebar导入值更改为默认类的名称.

In your code you are requesting the phonebar variable from your module, which is not the default export value. This will throw an error. Try changing the phonebar import value to the name of the default class.

请参见下面的示例.

import Phone from "https://unpkg.com/jssip-emicnet/dist/phonebar.js"

但是我看了看您的phonebar.js文件

But then I took a look at your phonebar.js file

您似乎已经从URL导入的代码已经被编译了，这意味着它不再像您尝试的那样与import和export一起使用.单击此处以查看代码的原始表示形式并进行搜索对于export default，看不到这样的东西.这会导致错误.

It seems that the code you import from the URL has been transpiled, meaning that it no longer works with import and export like you try to do. Click here to see the raw representation of your code and search for export default and see, there is no such thing. And that causes the errors.

我建议，如果可能的话，请导入src或phonebar.js脚本的开发版本.

I would recommend that, if possible, you would import the src or development version of your phonebar.js script.

或者不要使用模块并以标准方式加载脚本.

Or don't use a module and load in the script the standard way.

<script src="https://unpkg.com/jssip-emicnet/dist/phonebar.js"></script>

这篇关于通过脚本标签的ES6模块具有错误“所请求的模块未提供名为'default'的导出".的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！