继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

关于ES6 import命令的一个补充

会当凌绝顶聪明
关注TA
已关注
手记 240
粉丝 36
获赞 122

问题

今天查阅资料时发现,无论是阮一峰还是Mozilla网站有关ES6 import命令介绍部分都没有细致地提供这个命令后面可以跟一个文件路径的更多的细节。

其实,import命令一个典型的表达是其后面的from子句中可以直接跟一个路径(也常常跟一个省略.js扩展名的JS模块文件名)。

此时,ES6在解析时会到指定路径下查找一个名字为index.js的文件。注意:js文件只能用index.js,换其他名字都会报错!!!

典型应用

有关import命令的上述情况的一个典型应用是,把此文件夹下其他.js模块文件需要导出的内容汇总到这个index.js文件中,再有此文件统一导出必要的变量、函数和对象等提供给其他模块使用。
例如,在文件夹reducers下有文件index.js、visibilityFilter.js和todos.js等,在index.js文件中创建如下内容:

import {combineReducers} from 'redux'import todos from './todos'import visibilityFilter from './visibilityFilter'export default combineReducers({    todos,    visibilityFilter})

然后,在接下来的其他应用模块文件中就可以建立如下代码:

**import rootReducer from './reducers'**import './index.css';import App from './components/App';import registerServiceWorker from './registerServiceWorker';**const store=createStore(rootReducer)**ReactDOM.render(    <Provider store={store}>    <App />    </Provider>,    document.getElementById('root'));

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP