构建React项目的几种方式:
- 构建:create-react-app 快速脚手架
- 构建:generator-react-webpack
- 构建:webpack一步一步构建
这里我们create-react-app 快速脚手架构建项目。
优缺点:React项目构建的几种方式
一、安装
1、安装cnpm
国内使用 npm 速度很慢,你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:
$ sudo npm install -g cnpm --registry=https://registry.npm.taobao.org
$ sudo npm config set registry https://registry.npm.taobao.org
这样就可以使用 cnpm 命令来安装模块了:
$ cnpm install [name]
2、安装react
使用 create-react-app 快速构建 React 开发环境
create-react-app 是来自于 Facebook,通过该命令我们无需配置就能快速构建 React 开发环境。
create-react-app 自动创建的项目是基于 Webpack + ES6 。
执行以下命令创建项目my-app,并启动:
//创建项目
$ sudo cnpm install -g create-react-app
$ sudo create-react-app my-app
//启动项目
$ cd my-app/
$ sudo npm start
然后在浏览器中打开 http://localhost:3000/ ,即可。
现在很多人也用一个新的包管理工具yarn,来安装。
这里把npm和yarn做下对比:
//安装模块
> npm install lodash
> cnpm install lodash
> yarn add lodash
//启动项目
> npm start
> cnpm start
> yarn start
//构建项目
> npm run bulid
> cnpm run bulid
> yarn build
二、目录结构
- node_modules: 该文件夹是项目
所有依赖包的存放地址
,除了在项目初始化时安装的所必须的依赖包之外,我们后续通过yarn/npm安装的包都存放在该目录下。 - package.json:项目的
配置文件
- public:里面的index.html为
项目的入口文件
- src:
模块与组件的存放目录
。里面包含了我们使用的js文件,css文件,img文件等等。其中src里的index.js是项目的js入口文件
,它与public文件夹里的index.html相对应。
注:若用yarn安装,会有yarn.lock文件,它是依赖包的描述文件。
三、webpack
(1)webpack编译打包项目
> npm run build
(2)webpack配置文件
脚手架虽然封装了webpack,但默认配置文件是不开放的。
所以现在生成webpack的配置文件:
> npm run eject