Question

我试图通过脚本标签import a module

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

我遇到了错误

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

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

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

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

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

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

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

那我为什么不能通过<script>标签在浏览器中导入它？

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

class Phone {
  ...
}
export default Phone

我的webpack输出设置是这个

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

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

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

有了评论，我发现了这个Output an ES module using webpack

问题是关于webpack 2的，我正在使用webpack 4，但由于此问题仍然存在https://github.com/webpack/webpack/issues/2933，也许webpack尚不支持。

UMD is not compatible with JavaScript modules也有助于解释umd和es6模块。

Answer 1

起初我以为您的导入不正确

默认导出的名称为Phone。

class Phone {
  ...
}
export default Phone

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

请参见下面的示例。

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

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

您似乎已经从URL导入的代码已被编译，这意味着它不再像您尝试的那样与import和export一起使用。单击here查看代码的原始表示，然后搜索export default，然后看，没有这样的东西。这会导致错误。

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

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

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

通过脚本标签的ES6模块具有错误“所请求的模块未提供名为'default'的导出”

1 个答案: