通过react脚手架新建一个工程(1)
2018-09-08 本文已影响0人
木中木
目前，比较熟知的脚手架有create-react-app和generator-z-react-cli，废话不多说，直接开始
1.下载create-react-app，并全局安装
npm install create-react-app -g
接下来，我们安装我们的工程
create-react-app create-react-prj
cd .\create-react-prj\
npm start
安装完成后我们可以看到当前的目录结构
create-react-prj
|--build //构建目录，遵循发布系统规范
| |-- index.html //静态页面
| |-- static //资源文件
|
|-- node_modules //项目组件文件夹：所有安装的组件都在这
|
|--src //源码目录
| |--index.js //入口文件(还生成了其它的文件，但是没啥用，我们可以直接的删除掉)
|
|--public //静态页面目录
| |--index.html //主页面(还生成了其它的文件，但是没啥用，我们可以直接的删除掉)
|
|-- .gitignore //git提交的忽略文件，我们一般还需要再手动增加.idea(通过webstorm编辑工具进行开发，生成的文件)
|--package.json //项目依赖项及项目基础信息
|--README.md //项目描述
|-- ...
生成的package.json
{
"name": "create-react-prj",
"version": "0.1.0",
"private": true,
"dependencies": { //=>生产依赖项
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-scripts": "1.1.0"
},
"scripts": { //=>可执行脚本
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
/*
* 可执行脚本注释:
* $ npm run start 启动服务，自动编译项目，可以实现边开发，边自动编译刷新，看到最新开发的效果
*
* $ npm run build 把项目整体进行编译，最后再bulid目录中生成项目编译后的文件，我们上传服务器的就是这些文件
*
* $ npm run test 使用Jest作为测试运行程序（不常用）
*
* $ npm run eject 下文具体介绍使用
*
* 当然以上操作也可以基于yarn来完成
*/
这里我们看到通过create-react-app新建的工程，目录很优雅，没有webpack那些繁杂的配置，因为脚手架把这些配置都隐藏了，那么如果我们想要修改webpack配置，要怎么处理？
执行 npm run eject
执行后，目录结构更改
create-react-prj
|-- config //webpack的配置文件都在这里
| |--jest
| | |--cssTransform.js
| | |--fileTransform.js
| |--env.js
| |--paths.js
| |--polyfills.js
| |--webpack.config.dev.js
| |--webapck.config.prod.js
| |--webpackDevServer.config.js
|
|--scripts
| |-- build.js
| |-- start.js
| |-- test.js
后期如果想修改配置信息，修改webpack.config.dev.js、webpack.config.prod.js即可，当然其它的大家也可以去修改(前提是研究明运行的原理)
pakage.json中的目录如下
{
"name": "create-react-prj",
"version": "0.1.0",
"private": true,
"dependencies": { //=>在依赖项中把之前隐藏的（已经安装的）模块都显示出来了，其中很多都是配置webpack需要安装的
"autoprefixer": "7.1.6",
"babel-core": "6.26.0",
"babel-eslint": "7.2.3",
"babel-jest": "20.0.3",
"babel-loader": "7.1.2",
"babel-preset-react-app": "^3.1.1",
"babel-runtime": "6.26.0",
"case-sensitive-paths-webpack-plugin": "2.1.1",
"chalk": "1.1.3",
"css-loader": "0.28.7",
"dotenv": "4.0.0",
"dotenv-expand": "4.0.1",
"eslint": "4.10.0",
"eslint-config-react-app": "^2.1.0",
"eslint-loader": "1.9.0",
"eslint-plugin-flowtype": "2.39.1",
"eslint-plugin-import": "2.8.0",
"eslint-plugin-jsx-a11y": "5.1.1",
"eslint-plugin-react": "7.4.0",
"extract-text-webpack-plugin": "3.0.2",
"file-loader": "1.1.5",
"fs-extra": "3.0.1",
"html-webpack-plugin": "2.29.0",
"jest": "20.0.4",
"object-assign": "4.1.1",
"postcss-flexbugs-fixes": "3.2.0",
"postcss-loader": "2.0.8",
"promise": "8.0.1",
"raf": "3.4.0",
"react": "^16.2.0",
"react-dev-utils": "^5.0.0",
"react-dom": "^16.2.0",
"redux": "^3.7.2",
"style-loader": "0.19.0",
"sw-precache-webpack-plugin": "0.11.4",
"url-loader": "0.6.2",
"webpack": "3.8.1",
"webpack-dev-server": "2.9.4",
"webpack-manifest-plugin": "1.3.2",
"whatwg-fetch": "2.0.3"
},
"scripts": { //=>去掉了eject命令（这个命令是不可逆转的，执行一次生效后，就去掉这命令了）
"start": "node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js --env=jsdom"
},
"jest": {
"collectCoverageFrom": [
"src/**/*.{js,jsx,mjs}"
],
"setupFiles": [
"<rootDir>/config/polyfills.js"
],
"testMatch": [
"<rootDir>/src/**/__tests__/**/*.{js,jsx,mjs}",
"<rootDir>/src/**/?(*.)(spec|test).{js,jsx,mjs}"
],
"testEnvironment": "node",
"testURL": "http://localhost",
"transform": {
"^.+\\.(js|jsx|mjs)$": "<rootDir>/node_modules/babel-jest",
"^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
"^(?!.*\\.(js|jsx|mjs|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
},
"transformIgnorePatterns": [
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$"
],
"moduleNameMapper": {
"^react-native$": "react-native-web"
},
"moduleFileExtensions": [
"web.js",
"mjs",
"js",
"json",
"web.jsx",
"jsx",
"node"
]
},
"babel": {
"presets": [
"react-app"
]
},
"eslintConfig": {
"extends": "react-app"
}
}
这里我们可以看到 eject这个命令没有了，因为这个命令是不可逆的。
generator-z-react-cli
一款基于yeoman generator的脚手架：http://yeoman.io/ 1.首先基于npm在全局安装yeoman
npm install -g yo
其次在全局下安装脚手架
npm install -g generator-z-react-cli
最后生成项目
yo z-react-cli
目录结构：
my-app
|-- index.html //启动页(主页)
|-- build //构建目录，遵循发布系统规范
| |-- index.html //静态页面
| |-- static //资源文件发布到cdn,或发布到服务器
|
|-- src //源码目录
| |--component // 组件
| | |-- common //公共组件
| | |-- temp //父组件
| |--Config //工具方法
| |--Image //图片资源
| |--Redux //react-redux数据状态管理
| | |-- action.jsx //派发数据的action
| | |-- reducer.jsx //用于处理action的reducer
| | |-- store.jsx //数据管理器
| |-- Router //路由
| |-- Style //样式
| |-- template //编译html模板
| |-- App.jsx //js入口文件
|
|-- webpack.config.hot //本地热编译
|-- webpack.config.buildt //编译发布测试环境
|-- webpack.config.online //编译发布线上环境
|-- server.js
|-- server_hot.js //本地服务器启动文件
|-- .babelrc //ES6语言解析设置
|-- package.json //项目依赖项
|--
安装依赖
报了一个错误
check python checking for Python executable "python2" in the PATH
gyp verb which failed Error: not found: python2
然后我们谷歌了一把
npm --add-python-to-path='true' --debug install --global windows-build-tools
npm install --global node-gyp
执行完成后，就没有报错，安装完成
npm run hot
项目整体编译部署，用于测试环境 npm run buildt
项目整体编译部署，用于线上环境 npm run online
这个特色就是可以解析JSX语法，可以解析ES6语法新特性，支持LESS、SCSS预处理器，编译完成自动打开浏览器，单独分离CSS样式文件，支持文件MD5戳，解决文件缓存问题，支持图片，图标字体等资源的编译，支持浏览器源码调试，实现组件级热更新，实现代码的热替换，浏览器实时刷新查看效果，区分开发环境和生产环境分离业务功能代码和公共依赖代码
很明显 这个脚手架集成了更加强大的功能
