关于React脚手架的一点研究
<li id="bbgbf"><figcaption id="bbgbf"><fieldset id="bbgbf"></fieldset></figcaption></li><thead id="bbgbf"><noframes id="bbgbf"><aside id="bbgbf"></aside>

      <dl id="bbgbf"><map id="bbgbf"><embed id="bbgbf"></embed></map></dl>
    1. 关于React脚手架的一点研究

      作者:日期:2018-02-05 12:01:10 点击:301

      React是Facebook研发的一款前端框架(MVC框架:侧重于view层操作),目前在行业内广泛使用。为了让框架的体积变的更轻量级,设计者们把其定义为 “渐进式” 框架,也就是:

      主体核心的部分都在 react / react-dom 两个框架中
      如果想使用路由,我们需要安装 react-router
      如果想使用redux进行状态统一管理,我们再安装 redux / react-redux
      如果想实现其它的功能,我们还可以继续安装 中间件 / axious 等

      根据用户所需,再安装不同的配套组件来完成,这就是 “渐进式” 设计思想 (vue也是这样设计的)

      这样的操作有好处,也有弊端,麻烦的是,开发中我们需要不断的安装各种组件,而且react独有的jsx语法是不能直接的被浏览器解析的,我们在编写程序过程中使用的es6/less等等都需要进行编译处理…

      此时我们非常期待有一款自动化部署工具,可以帮助我们自动完成这些编译的操作,webpack就是目前项目中非常常用的自动化部署平台,我们在搭建项目之前,还需要自己配置webpack。

      类似于这样的操作还有很多,所以复杂繁琐的项目工程配置、模块安装等成为开发者们一大痛苦,有人调侃,是不是以后会出现 “前端配置工程师” ;

      为了解决这些问题,市面上有很多react项目开发的脚手架:

      • generator-z-react-cli
      • create-react-app

      通过这些脚手架,我们可以快速搭建一套完整的react项目工程结构,避免人工手动一点点配置。


      create-react-app

      FaceBook官方发布了一个无需配置、用于快速构建开发环境的脚手架工具:

      1、首先基于npm在全局安装create-react-app

      $ npm install -g create-react-app

      2、在指定目录中创建一个react项目工程

      $ create-react-app my-app

      my-app是自己设置的项目名称(遵循npm模块发布时的要求,例如:名字中不能出现大写字母或者汉字以及特殊字符等)

      3、进入到指定的项目文件,启动项目

      $ cd my-app

      $ npm run start 或者 $ yarn start (前提是在全局安装了yarn)

      生成的结构目录

      my-app
      |-- build //构建目录,遵循发布系统规范
      | |-- index.html //静态页面
      | |-- static //资源文件
      |
      |-- node_modules //项目组件文件夹:所有安装的组件都在这
      |
      |-- src //源码目录
      | |--index.js //入口文件(还生成了其它的文件,但是没啥用,我们可以直接的删除掉)
      |
      |-- public //静态页面目录
      | |--index.html //主页面(还生成了其它的文件,但是没啥用,我们可以直接的删除掉)
      |
      |-- .gitignore //git提交的忽略文件,我们一般还需要在手动增加.idea(通过webStorm编辑工具进行开发,生成的文件)
      |-- package.json //项目依赖项及项目基础信息
      |-- README.md //项目描述
      |-- ...

      生成的package.json

      {
      "name": "my-app",
      "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 把项目整体进行编译,最后在build目录中生成项目编译后的文件,我们上传服务器的就是这些文件
      *
      * $ npm run test 使用Jest作为测试运行程序(不常用)
      *
      * $ npm run eject 下文具体介绍使用
      *
      * 当然以上操作也可以基于yarn来完成
      */

      通过分析,我们发现create-react-app有如下的一些特点:

      • 仅仅是安装了react中最常用的 react / react-dom 组件,其余的并没有安装,所以在项目开发中,我们根据需要,可能还会安装:$ yarn add redux react-redux react-router-dom prop-types 等等
      • 生成项目后,脚手架为了“优雅”,隐藏了所有的webpack相关的配置文件,此时查看myapp文件夹目录,会发现找不到任何webpack配置文件;这也就导致了,如果我们需要在webpack中安装一些自己的loder或者plugin变的很困难;
      • create-react-app自动生成的webpack中集成了:eslint(代码检测)、url-loader(图片BASE64 [小于10000kb的图片])、babel-loader(ES6和JSX语法解析)、style-loader、css-loader(CSS代码解析)、HtmlWebpackPlugin(产出HTML插件)等内容

      npm run eject

      上面提到,脚手架为了“优雅”,隐藏了所有的webpack相关配置文件,如果我们想要基于原来的基础再次增加一些自己的东西,首先就要找到这些隐藏文件并且进行修改。

      有的开发者直接到node_modules中去搜索webpack.config…等文件,然后进行修改,修改后发现生效了,但是当修改后,我们又安装了一些其它项目模块,重新编译的时候,又回到了原有的配置信息(很头疼的问题,总不能每一次安装新模块后,都重新改一次需要修改的配置吧…)

      基于create-react-app创建完成项目后,会提供一个eject命令($ yarn eject),基于这个命令,可以把隐藏的webpack文件展示出来,方便我们二次进行配置。

      $ yarn eject 或者 npm run eject

      此命令执行完成不可逆转(慎重使用)

      执行完成后,我们可以看到原有的结构目录发生了一些变化(新增两个文件夹,package.json 中的内容也跟着发生改变)

      结构更改

      my-app
      |-- config //webpack的配置文件都在这里
      | |-- jest
      | | |--cssTransform.js
      | | |--fileTransform.js
      | |-- env.js
      | |-- paths.js
      | |-- polyfills.js
      | |-- webpack.config.dev.js
      | |-- webpack.config.prod.js
      | |-- webpackDevServer.config.js
      |
      |-- scripts
      | |-- build.js
      | |-- start.js
      | |-- test.js
       
      后期如果想修改配置信息,修改webpack.config.dev.js 、webpack.config.prod.js 即可,当然其它的大家也可以去修改(前提是研究明白运行的原理)

      package.json中的变更

      {
      "name": "my-app2",
      "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"
      }
      }
       

      如果你熟练掌握webpack的配置操作,那么接下来就可以自己去扩充webpack了…


      generator-z-react-cli

      一款基于 yeoman generator 的脚手架

      1、首先基于npm在全局安装yeoman

      $ npm install -g yo

      2、其次在全局下安装脚手架

      $ npm install -g generator-z-react-cli

      3、最后生成项目

      $ 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 //项目依赖项
      |-- ...

      可执行命令

      # 安装依赖
      npm install
       
      # 在本地主机(8088端口)上提供热重载:即输入http://localhost:8088可访问正在开发的项目
      npm run hot
       
      # 项目整体编译部署,用于测试环境
      npm run buildt
       
      # 项目整体编译部署,用于线上环境
      npm run online

      功能特色

      • 可以解析JSX语法
      • 可以解析ES6语法新特性
      • 支持LESS、SCSS预处理器
      • 编译完成自动打开浏览器
      • 单独分离CSS样式文件
      • 支持文件MD5戳,解决文件缓存问题
      • 支持图片、图标字体等资源的编译
      • 支持浏览器源码调试
      • 实现组件级热更新
      • 实现代码的热替换,浏览器实时刷新查看效果
      • 区分开发环境和生产环境分离业务功能代码和公共依赖代码

      package.josn文件部分预览

      {
      "name": "my-app", //=>项目名称
      "version": "1.0.0", //=>项目版本
      "description": "...", //=>项目描述
      "main": "index.js", //=>项目入口文件
      "scripts": { //=>可执行的命令脚本
      "dev": "node server.js", //=>启动服务
      "hot": "node server_hot.js", //=>项目本地预览
      "buildt": "webpack --config webpack.config.buildt.js --progress --colors --watch -p", //=>项目编译:用于测试
      "online": "webpack --config webpack.config.online.js --progress --colors --watch -p" //=>项目编译:用于线上
      },
      ...
      "dependencies": { //=>生产依赖模块
      "babel-polyfill": "^6.23.0",
      "body-parser": "^1.17.1",
      "deep-extend": "^0.4.1",
      "github-markdown-css": "^2.4.0",
      "immutable": "^3.8.1",
      "isomorphic-fetch": "^2.2.1",
      "normalize.css": "^4.1.1",
      "pure-render-decorator": "^1.2.1",
      "react": "^15.5.4",
      "react-dom": "^15.3.2",
      "react-redux": "^4.4.5",
      "react-router": "^4.1.1",
      "react-router-dom": "^4.1.1",
      "redux": "^3.6.0",
      "redux-immutablejs": "^0.0.8",
      "redux-promise": "^0.5.3",
      "redux-thunk": "^2.1.0",
      "sass-loader": "^4.1.1"
      },
      "devDependencies": { //=>开发依赖模块
      "autoprefixer-loader": "^3.2.0",
      "babel-core": "^6.23.1",
      "babel-loader": "^6.2.8",
      "babel-plugin-transform-decorators-legacy": "^1.3.4",
      "babel-preset-es2015": "^6.6.0",
      "babel-preset-react": "^6.5.0",
      "babel-preset-react-hmre": "^1.1.1",
      "babel-preset-stage-0": "^6.16.0",
      "body-parser": "^1.15.1",
      "browser-sync": "^2.18.8",
      "clean-webpack-plugin": "^0.1.16",
      "css-loader": "^0.23.1",
      "express": "^4.14.0",
      "extract-text-webpack-plugin": "^1.0.1",
      "file-loader": "^0.8.5",
      "html-webpack-plugin": "^2.22.0",
      "http-proxy-middleware": "^0.17.3",
      "jsx-loader": "^0.13.2",
      "less": "^2.6.1",
      "less-loader": "^2.2.3",
      "node-sass": "^3.11.3",
      "react-hot-loader": "^1.3.1",
      "react-transform-catch-errors": "^1.0.2",
      "react-transform-hmr": "^1.0.4",
      "redbox-react": "^1.3.3",
      "sass": "^0.5.0",
      "sass-loader": "^4.0.2",
      "style-loader": "^0.13.1",
      "url-loader": "^0.5.7",
      "webpack": "^1.13.0",
      "webpack-dev-middleware": "^1.8.4",
      "webpack-dev-server": "1.14.1",
      "webpack-hot-middleware": "^2.13.2"
      }
      }

      这个脚手架要比create-react-app提供更为丰富的功能,大家可根据自己的喜好选择。

      偷偷告诉你(#^.^#)
      想要了解更多前端知识,免费下载一些精华的前端视频(有关于ES6/Vue/React等),可以访问:http://la-poupee.com/videoCourse/index.html 或者 咨询QQ:1144709265

      关注珠峰培训公众号,每周都有精彩的文章和视频等着你哦~~

      上一篇: vue开发中router路由详解

      下一篇: Ajax基础知识

      73099威尼斯城73099.com |威尼斯73099.com官方网站登录 |威尼斯手机娱乐官网 | |手机版 | | 澳门威尼斯3544.com,威尼斯3544.com官网登陆,威尼斯3544.com备用网址-0327.com|威尼斯澳门官方6799.com,www.6799.com,威尼斯官方娱乐6799.com登陆-vns566.net|6799.com威尼斯手机版,6799.com威尼斯网址,6799.com威尼斯官网登陆-59859.com|86087威尼斯城86087.com,威尼斯86087.com官方网站登录,威尼斯手机娱乐官网-83855.com|澳门威利斯人手机版,www.86087.com官方入口,澳门威利斯人在线娱乐-944185.com|威尼斯澳门官方4886.com,www.4886.com,威尼斯官方娱乐4886.com登陆-k92988.com|