在实践开发中模块化的运用无处不在。
每一个文件都是一个独立的模块。
一个模块需要对外提供接口,主要使用export
命令
一个模块可以引入其他模块,主要使用export
命令
- 在线的模块化学习环境
codepen.io
通过创建一个免费的独立项目来编写我们的学习或者测试代码。 支持ES6的所有语法。
本地模块化开发环境搭建。
如果自己学习如何配置自己的本地环境的话,还需要额外的去学习构建工具的使用,这将会花费许多时间。因此这里我们借助别人已经构建好的环境,下载安装到本地即可。此处要给大家介绍的create-react-app
的使用。
- 在自己的电脑上安装node
通常的安装方式是去node官网下载安装包,选择与自己电脑相符合的版本即可。 下载地址: http://nodejs.cn/download/
- 安装命令行工具
在windows环境下,系统默认的cmd非常难用,因此推荐大家使用git.bash或者cmder。
git下载地址:https://git-scm.com/downloads git安装好之后,在安装目录下会有一个bash工具,双击打开就可以直接使用了。
cmder下载地址:http://cmder.net/
在mac环境下就方便很多,大家可以直接使用系统自带的terminal工具。也可以使用一款叫做iterm2的工具。 iterm2下载地址:http://www.iterm2.com/downloads.html
除此之外,大家可以自行去网上搜索iterm2的相关插件与配置,相信折腾之后,你会发现iterm2的强大能够更好的帮助你。
- 安装包管理工具npm或者yarn
我们在开发代码的时候,经常会用到别人已经写好的库,插件等。因此我们需要一个包管理工具来帮助我们,让我们的使用过程更加简单与方便。因此就有了npm与yarn。
npm在安装node时已经默认安装了。因此我们只需要在命令行工具中使用如下的指令验证一下是否安装成功即可。
// 查看node版本
> node -v
// 查看npm版本
> npm -v
yarn是一个更新的包管理工具,具体的安装过程请在其官方网站中查看,地址如下:
https://yarnpkg.com/zh-Hans/docs/install#mac-tab
- 安装create-react-app
在确保create-react-app安装
> npm install -g create-react-app
// 或者
> yarn global add create-react-app
安装完毕之后,我们就可以使用create-react-app
来创建一个项目。
- 创建create-react-app项目
创建并进入一个你要存放项目的目录,假设命名为develop
,运行一下指令。
> create-react-app es6app
create-react-app会自动帮助我们在develop目录下创建一个叫做es6app的文件夹,这就是我们新创建的项目。
- 运行项目
使用如下命令行进入刚才我们创建的项目es6app。
> cd es6app
我们可以使用创建项目时的提示指令来运行项目。
> yarn start
// 或者
> npm start
项目启动需要花费一点时间,启动之后,通常浏览器会自动打开一个新的页面运行项目,我们也可以在浏览器中输入http://localhost:3000
来运行项目。
认识项目
package.json与yarn.lock
这两个文件是构建工具需要的配置信息与项目依赖包信息。目前暂时不用过多的考虑他们的用处,等之后大家在深入学习构建工具时自然会明白他们的作用。
- node_modules
项目依赖包的安装目录。当我们创建项目时,会根据配置文件中的依赖包信息把所有需要的插件工具模块等都安装在该目录下。
- public
用于存放静态文件。主要作用是html入口文件的粗放。我们也可以存放其他公用的静态资源,如图片,css文件等。其中的index.html就是我们项目的入口html文件。
- src
组件的存放目录。在create-react-app创建的项目中,每一个单独的文件都可以被看成一个单独的模块,单独的image,单独的css,单独js等,而所有的组件都存放于src目录中,其中index.js则是js的入口文件。虽然我们并没有在index.html中使用script标签引入它,但是他的作用就和此一样。
当然create-react-app创建的项目,主要的目的是帮助大家进行react的开发。因此利用此来学习ES6已是绰绰有余,并且能够为我们进一步学习react奠定一定的基础。