javascript - 如何在 javascript 中配置 babel7 以支持从 `export default` 中的 `import {}`
问题描述
我正在使用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'
}
]
},
解决方案
这与 Babel 无关。问题是您需要了解命名导出的工作原理。
import { a } from './test';
正在尝试从 导入命名的导出。括号语法用于导入命名导出。a
test.js
{}
相反,去
import a from './test';
这是导入default
导出的语法,
或更改test.js
为执行名为的导出a
:
const a = 1;
export { a };
你test.js
只有一个default
出口,没有一个名为a
.
推荐阅读
- sql - Oracle 中 all_tab_statistics 的所有者是什么?
- firebase - Firestore 公共收集规则
- typescript - 如何在打字稿中定义一个通用接口
- angular - Angular - 支持最小值和最大值的反应形式的数字掩码
- powershell - Close-SMBOpenFile 抛出错误并且未在 try-catch 中捕获
- java - 以 JSON 正文作为输入在 Endpoint 中生成输出
- java - Bouncy castle no such method error (v1.61) and milo (v0.3.8)
- javascript - 在 Javascript 中加载液体的问题
- python-3.x - Pycharm(使用 matplotlib)如何在我的代码旁边以相同的 Py 魅力显示我的图表?不在附加窗口中
- dask - Dask Locality,如何从本地工作文件中读取?