关于ES6 import命令的一个补充

Posted 2020-11-19

问题

今天查阅资料时发现，无论是阮一峰还是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‘)
);