如何配置 babel7 以支持从 javascript 中的 `export default` 中的 `import {}`

Question

我正在为一个 javascript 项目使用 webpack 4 和 babel 7。当我使用 import { ... } 语法时我不工作。下面是源代码：

./test.js

const a = 1;

export default { a };

./index.js

import { a } from './test';

console.log(a);

输出为undefined。如果我按如下方式更改 index.js，它会正常工作：

import a from './test';

console.log(a.a);

我想知道我应该如何配置 babel7 来支持 import {}。下面是我的 .babelrc:

{
  "presets": [
    "@babel/preset-env"
  ]
}

我也尝试了一些插件，但其中 none 有效：

{
  "presets": [
    "@babel/preset-env"
  ],
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-transform-async-to-generator",
    "@babel/plugin-proposal-object-rest-spread",
    "@babel/plugin-proposal-export-default-from",
    "@babel/plugin-syntax-export-default-from",
    "@babel/plugin-proposal-export-namespace-from"
  ]
}

以下是依赖项：

devDependencies": {
    "@babel/cli": "^7.2.3",
    "@babel/core": "^7.2.2",
    "@babel/plugin-proposal-class-properties": "^7.2.3",
    "@babel/plugin-proposal-decorators": "^7.2.3",
    "@babel/plugin-proposal-export-default-from": "^7.2.0",
    "@babel/plugin-proposal-export-namespace-from": "^7.2.0",
    "@babel/plugin-proposal-object-rest-spread": "^7.2.0",
    "@babel/plugin-syntax-export-default-from": "^7.2.0",
    "@babel/plugin-transform-arrow-functions": "^7.2.0",
    "@babel/plugin-transform-async-to-generator": "^7.2.0",
    "@babel/preset-env": "^7.2.3",
    "@babel/preset-es2015": "^7.0.0-beta.53",
    "babel-loader": "^8.0.4",
    "jest": "^23.6.0",
    "webpack": "^4.28.2",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.14"
  },

下面是我的 webpack 配置 babel-loader:

module: {
      rules: [
        {
          test: /\.js?$/,
          exclude: /(node_modules)/,
          loader: 'babel-loader'
        }
      ]
    },

Answer 1

这与 Babel 无关。问题是您需要阅读命名导出的工作原理。

import { a } from './test';

正在尝试从 test.js 导入 named 导出 a。方括号 {} 语法用于导入 named 导出。

相反，选择

import a from './test';

这是导入 default 导出的语法，

或更改 test.js 以执行名为 a:

的导出

const a = 1;

export { a };

您的 test.js 只有 default 导出，并且 none 名为 a。

如何配置 babel7 以支持从 javascript 中的 `export default` 中的 `import {}`

How to configure babel7 to support `import {}` from `export default` in javascript

javascript

webpack

babeljs

babel-loader

webpack-4