关于ES6 import命令的一个补充

问题

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

原文地址:http://blog.51cto.com/zhuxianzhong/2131357

时间: 2024-11-11 04:37:17

关于ES6 import命令的一个补充的相关文章

react + es6 +ant design 实现一个简单demo表格添加删除

首先介绍一下整体的样式及实现的效果 如图所示,点击添加按钮会接着后面新增一行,点击操作下的删除图标将会删掉一行,如果删掉序号为1的行,第二行会自动变成第一行序号也会随之改变. ps:数据交互均还未实现. 介绍完毕:下面正题! 1.布局 import React, { Component, PropTypes } from 'react';import { Table, DatePicker, Select, InputNumber, Input, Button, Icon } from 'ant

ES6 import 引用文件夹/目录及其处理过程

1.现象 看redux的时候发现官网的教程里直接import了一个文件夹,我再三确定没有看错, 是一个 文件夹 (Directory), 它直接 import了一个目录!这个 文件夹/目录 底下还有一个index.js文件. js文件只能用index.js,换其他名字都会报错.我使用的是webpack + babel-loader来编译它的,也许是webpack或者是babel的某个设定而不是ES6 import本身的,总之这样是可以用的. 我也发现了这个问题,import是可以导入目录的,我看

Amd,Cmd, Commonjs, ES6 import/export的异同点

Amd,Cmd, Commonjs, ES6 import/export等均是模块化方案 1.Commonjs使用在Nodejs上,加载模块是同步的. 2.Amd是requirejs在推广过程中对模块定义的规范化产出,异步模块定义,requirejs是对这个概念的实现,好比JavaScript语言是对ECMAScript规范的实现. 3.Cmd是seajs在推广过程中对模块定义的规范化产出,是一个同步模块定义,seajs是cmd概念的一个实现,seajs是淘宝团队提供的一个模块开发的js框架.

Java调用cmd命令 打开一个站点

使用Java程序打开一个站点 近期做了个东西使用SWT技术在一个client程序 须要升级时在提示升级 点击窗口上的一个连接 打开下载网页 花费了我非常长时间 用到了把它记录下来  怕是忘记,须要时能够直接来用到.         try { //不是在Java程序中运行而是在操作系统中运行             Runtime.getRuntime().exec("cmd /c start http://blog.csdn.net/blogluoqi/"); //Runtime.g

在程序中使用命令打开一个进程和记录该进程执行日志

//在需要的程序中调用ExcutedCmd函数来打开执行dos命令 //cmd 命令  args 命令参数 private static void ExcutedCmd(string cmd, string args) { using (Process p = new Process()) { ProcessStartInfo psi = new ProcessStartInfo(cmd, args); psi.CreateNoWindow = true; psi.UseShellExecute

sed命令的一个用法

有命令如下: 1.sed -n '1~2!p' datafile 该条命令的意思是:每两行读取datafile文件到模式空间,匹配每两行中的第一行,不打印,剩下的行打印,取消默认输出. 2.sed -n '1~2p' datafile 该条命令的意思是:每两行读取datafile文件到模式空间,匹配每两行中的第一行,打印,剩下的行不打印,取消默认输出. 3.sed '1~2d' datafile 这条命令和第一条命令等同. 附:Linux中sed的命令手册相关解释 first~step     

关于 ls 命令的一个小小的缺陷

原来有一两个人说我不帅的时候,我不以为意,逗我玩而已,后来几乎所有 人都说我不帅,我才真正意识到事态的严重,这社会骗子真是越来越多了... 好吧我承认,这个笑话不好笑,其实我想说的是,做人一定要坚持自己的原则, 哪怕有一天所有人都和你背道而驰,都不要放弃自己当初的梦想,如果有一天, 我们淹没在人海之中,庸碌一生,那是因为我们不够努力,不够勇敢的去面对生活. 每天积累一点点,嗯,满足简单的快乐. ---------------------------------------------------

es6 import

最近用reactjs写个h5 应用,封装一个model.然而使用这个model时候 总是报错: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.... 什么一开始还以为是style啥的 语法错误了,还真有! 然而 这个错误还是存在,stack overflow下 没啥结果.突然

es6 import 和node 的require

服务器端 node的module遵循CommonJS规范,浏览器端 requirejs遵循AMD,seajs遵循CMD 在node模块中,采用的是CommonJS规范,使用require引入模块,使用module.exports导出接口. ES6标准发布后,module成为标准,使用import引入模块,使用export指令导出接口, // a.js // -------- node ----------- module.exports = { a : function() {}, b : 'x