[React] create-react-app

[React] create-react-app

对于一个React的项目,建立好一个良好的开发环境是非常必要的。事实上,为了省去配置的困难,FB开发了create-react-app来架设好需要的环境。

create-react-app

create-react-app暗藏了开发过程中需要的webpackbabel包,并写好了react项目的配置文件,简化开发流程。

为了了解create-react-app所包含的安装包和配置,需要run npm run eject来退出react-app的包裹,但这个指令执行后就无法再使用create-react-app的功能且无法获得更新,可以建个demo package来看

Webpack

A module bundler

来自官网的解释:

At its core, webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph which maps every module your project needs and generates one or more bundles.

简而言之就是Webpack帮助把零散的项目文件,通过不同文件之间的连接和依赖关系,形成一个完整的依赖关系图,整合到一个项目集合中。而且提供了针对开发,生产环境的优化模式。

create-react-app执行过程中,用webpack产生了如下的config文件

可以查看node_modules/react-scripts/config下的配置,包含:
webpack.config.js
webpackDevServer.config.js

Babel

Babel是一个JavaScript编译器。

来自官网解释:

Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments.

Babel能够将ES2015及更高版本的语法转换为普通浏览器能够识别的Js语法,方便开发者能够采用最新特性的同时又能够兼容不同的新旧版本浏览器。

为了能够在文本编译器中高亮语法,也需要安装babel的插件。

Eslint

来自官网:

ESLint is an open source JavaScript linting utility originally created by Nicholas C. Zakas in June 2013. Code linting is a type of static analysis that is frequently used to find problematic patterns or code that doesn’t adhere to certain style guidelines.

Eslint能够检测语法标准。因为create-react-app本身支持Babel,所以安装的Eslint除了eslint之外,也包含babel-eslint,来对ES2015的语法进行检测。

Jest

Jest is a delightful JavaScript Testing Framework with a focus on simplicity
Jest 可以用来开发针对Component和逻辑的单元测试。只要JS测试文件采用.spec.js 或.test.js结尾,或者将测试文件放到tests文件目录下,就会在npm test指令后自动执行。

最后附上一个还不错的CRA(create-react-app)功能解释:Create React App: A quick setup guide

#

评论