我正在将 webpack 4
和 babel 7
用于 JavaScript 项目。当我使用 import { ... }
语法时,我不起作用。下面是源代码:
./test.js
const a = 1;
export default { a };
./index.js
import { a } from './test';
console.log(a);
输出是未定义
。如果我按如下方式更改 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"
},
下面是我的 babel-loader
的 webpack 配置:
module: {
rules: [
{
test: /\.js?$/,
exclude: /(node_modules)/,
loader: 'babel-loader'
}
]
},
最佳答案
这与 Babel 无关。问题是您需要阅读命名导出的工作原理。
import { a } from './test';
正在尝试从 test.js
导入 named 导出 a
。括号 {}
语法用于导入 named 导出。
相反,请选择
import a from './test';
这是导入默认
导出的语法,
或更改 test.js
以执行名为 a
的导出:
const a = 1;
export { a };
您的 test.js
仅具有 default
导出,并且没有名为 a
的导出。
关于javascript - 如何在javascript中配置babel7以支持 `import {}`从 `export default`,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53985395/