进入新公司已经半年了,各个业务线,技术栈都已经熟悉,工作也已经游刃有余,决定慢下脚步,沉淀积累,回顾一下所用技术栈所包含的基本知识,以及再公司中的实战。
首先回顾新项目搭建 react脚手架目前使用较多的有三个:
react-boilerplate react-redux-starter-kit create-react-app
今天先来回顾一下react的官方脚手架 create-react-app是FaceBook 官方发布了一个无需配置的、用于快速构建开发环境的脚手架工具 对于create-react-app这个脚手架,网上给的优点无外乎下面这几个: 使用的原因以及特性: 无需配置; 集成了对 React, JSX, ES6 和 Flow 的支持; 集成了开发服务器; 配置好了浏览器热加载的功能; 在 JavaScript 中可以直接 import CSS 和图片; 自动处理 CSS 的兼容问题,无需添加 -webkit 前缀; 集成好了编译命令,编译后直接发布成产品,并且还包含了 sourcemaps。 快速使用: 建议使用node版本>6,npm版本>3 安装 create-react-app:npm install -g create-react-app
使用 create-react-app快速生成一个新项目:
在搭建成功之后会有操作说明:
安装后cd react-progrem文件夹里启动项目:npm start 启动之后就可以看到一个welcome页面,然后就可以去src下面编辑你自己的APP啦:
测试:npm test (执行测试动作) 编译:npm build (编译项目执行) 弹出:npm run eject (弹出配置文件,自己修改webpack之类的配置,one-way operation,慎重使用 )
在这个脚手架里,webpack的配置文件被隐藏掉了,自定义修改webpack的配置主要有以下两种方法: 1、npm run reject 将webpack的配置文件config弹出来,此过程不可逆,弹出就无法再隐藏回去了 2、(1)使用react-app-rewired
npm install react-app-rewired --dev npm install babel-plugin-import --dev
(2)修改package.json里的配置:
/* package.json */ "scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test --env=jsdom", }
(3)在项目根目录下创建config-overrides.js
/* config-overrides.js */ const { injectBabelPlugin } = require('react-app-rewired'); module.exports = function override(config, env) { config = injectBabelPlugin(['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }], config); return config; };
这是一般的快速搭建项目的方法,由于公司有自己的项目搭建配置,没有使用create-react-app。。。