Как настроить babel7 для поддержки `import {}` из `export default` в javascript - PullRequest
Новая
       106

Как настроить babel7 для поддержки `import {}` из `export default` в javascript

0 голосов
/ 31 декабря 2018

Я использую webpack 4 и babel 7 для проекта JavaScript.Я не работаю, когда использую синтаксис 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"
  ]
}

Я также попробовал несколько плагинов, но ни один из них не работает: 

{
  "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'
        }
      ]
    },

1 Ответ

0 голосов
/ 31 декабря 2018

Это не имеет ничего общего с Бабелем. Проблема в том, что вам нужно прочитать о том, как работает именованный экспорт. 

import { a } from './test';

пытается импортировать именованный экспорт a из test.js.Синтаксис скобок {} предназначен для импорта с именем экспорта.

Вместо этого используйте 

import a from './test';

, который является синтаксисом для импорта экспорта default,

или изменения test.js для выполнения экспорта с именем a: 

const a = 1;

export { a };

Ваш test.js имеет только default экспорт, и ни один с именем a.

...