无法使用Webpack 4和Babel 7导出默认值

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了无法使用Webpack 4和Babel 7导出默认值相关的知识,希望对你有一定的参考价值。

以下是Babel 6的一些功能,但是我遇到了Babel 7的问题。我正在尝试将(默认)类导出为库。目前,当我尝试导入它时,我收到以下错误。

未捕获的SyntaxError:请求的模块'./dist/datastore.js'不提供名为'default'的导出

我的配置几乎与我以前的配置相同,只是使用Babel 7更新。

来自Webpack的比特:

output: {
  path: `${__dirname}/dist`,
  filename: `${moduleName}.js`,
  library: 'datastore',
  libraryExport: 'default',
  libraryTarget: 'umd',
  umdNamedDefine: true
},

我的入口点的比特:

import DataStore from './datastore';

export default DataStore;

来自.babelrc的比特:

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "node": "current"
      },
      "modules": false
    }]
  ],
  "plugins": [
    "@babel/plugin-transform-async-to-generator",
    "@babel/plugin-transform-destructuring",
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-object-rest-spread"
  ]
}

有人有主意吗?

答案

如果您使用的是babel 7,则需要加载此包:

npm i --save-dev babel-plugin-add-module-exports

然后添加你的babel配置这个插件'add-module-exports':

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        modules: false,
        targets: {
          browsers: ['last 2 versions', 'safari >= 7']
        }
      }
    ]
  ],
  plugins: ['add-module-exports']
};
另一答案

错误消息是说它是datastore.js,它不提供名为'default'的导出 - 是吗?

您的入口点.js文件不需要导出任何内容,它不是一个模块,它正在导入datastore.js,其中错误消息显示应该存在并导出名为“default”的文件。

以上是关于无法使用Webpack 4和Babel 7导出默认值的主要内容,如果未能解决你的问题,请参考以下文章

使用 babel 和 webpack 转换代码时,导出默认值不会被转换

在客户端使用 Babel 进行转译、导入和导出,不用 Webpack?

babel 7.x 结合 webpack 4.x 配置

Babel 7 + Inversify 4 + WebPack 4 - @inject 上的意外字符'@'

从零开始配置webpack(基于webpack 4 和 babel 7版本)

从零开始配置webpack(基于webpack 4 和 babel 7版本)