这似乎是显而易见的,但我发现自己对于何时使用花括号在ES6中导入单个模块感到困惑.例如,在我正在处理的React-Native项目中,我有以下文件及其内容:
initialState.jsvar initialState = {
todo: {
todos: [
{id: 1, task: 'Finish Coding', completed: false},
{id: 2, task: 'Do Laundry', completed: false},
{id: 2, task: 'Shopping Groceries', completed: false},
]
}
};
export default initialState;
在TodoReducer.js中,我必须在没有花括号的情况下导入它:
import initialState from './todoInitialState';
如果我initialState用大括号括起来,我会得到以下代码行的错误:
TodoReducer.js:无法读取未定义的属性待办事项
export default function todos(state = initialState.todo, action) {
// ...
}
使用花括号的组件也会发生类似的错误.我想知道何时应该使用大括号进行单次导入,因为很明显,当导入多个组件/模块时,你必须将它们用大括号括起来,我知道.
编辑:
所谓张贴在这里并没有回答我的问题,而不是我问的时候我应不应该用花括号用于导入单个模块,或者我不应该用花括号中ES6导入单个模块(这显然不是例如,我已经看过需要花括号的单个导入)
// Build out our basic SafeString type
function SafeString(string) {
this.string = string;
}
SafeString.prototype.toString = function() {
return "" + this.string;
};
export default SafeString;
我以前从未见过export default.有没有相同的东西export default可以更容易理解？
我想知道，以下两个选项之一是在webpack中更好地进行Tree Shaking的正确方法：
import { someFeature } from 'someModule' // Option 1
import { isEmpty } from 'lodash' // Example 1
或者，
import someFeature from 'someModule/someFeature' // Option 2
import isEmpty from 'lodash/isEmpty' // Example 2
我的组件文件夹中有一个名为 Header 的组件。主要 JS 文件和样式文件。由于某种原因我得到"import error: 'Header' is not exported from 'components/Header'"
标头.js：
const Header = () => {
return (
<div>
<h2>The Header</h2>
</div>
);
};
export default Header;
组件/标题/index.js：
export * from "./Header";
应用程序.js：
import { Header } from "components/Header";
function App() {
return (
<div className="App">
<Header />
</div>
);
}
export default App;
为什么这不起作用？
我试图在“config.ts”的一个文件中设置所有配置，将其加载到 ConfigService，然后使用配置接口从中获取值。这是我的 config.ts，其中包含 .env 文件中的 ENV 变量和静态变量。
UPD：用这个例子制作了回购协议
import { Config } from './config.interface';
const config: Config = {
typeorm: {
type: 'postgres',
host: process.env.DB_HOST,
port: +process.env.DB_PORT,
username: process.env.DB_USERNAME,
password: process.env.DB_PASSWORD,
database: process.env.DB_NAME,
synchronize: process.env.NODE_ENV !== 'prod',
logging: true,
entities: [User, RefreshToken],
},
};
export default () => config;
这是我的界面：
export interface Config {
typeorm: TypeOrmConfig;
}
export interface TypeOrmConfig {
type: string;
host: string;
port: number;
username: string;
password: string;
database: string;
synchronize: boolean;
logging: boolean;
entities: any[]; …ecmascript-6 ×3
javascript ×3
node.js ×2
es6-modules ×1
import ×1
nestjs ×1
reactjs ×1
tree-shaking ×1
webpack ×1