使用create-react-app 构建react应用(react-scripts)

懂小姐 發表於 2020-8-8 18:31:00

使用create-react-app 构建react应用(react-scripts)

前言:
<blockquote>
create-react-app 是一个全局的命令行工具用来创建一个新的项目
react-scripts 是一个生成的项目所需要的开发依赖</blockquote>
         一般我们开始创建react web应用程序的时候,要自己通过 npm 或者 yarn 安装项目的全部依赖，再写webpack.config.js,一系列复杂的配置,搭建好开发环境后写src源代码。 现在如果你正在搭建react运行环境，使用 create-react-app 去自动构建你的app程序。你的项目所在的文件夹下是没有配置文件。react-scripts 是唯一的额外的构建依赖在你的package.json中，你的运行环境将有每一个你需要用来构建一个现代React app应用程序。你需要的依赖，和在配置文件中编写的配置代码，react-scripts 都帮你写了，比如：react-scripts帮你自动下载需要的 webpack-dev-server 依赖，然后react-scripts自己写了一个nodejs服务端的脚本代码 start.js来实例化 WebpackDevServer ，并且运行启动了一个使用 express 的Http服务器，现在你只需要专心写src源代码就可以了。省去了很多精力，最适合快速上手一个demo了。 react-scripts有以下支持，都帮你配置好了： React, JSX, ES6, and Flow syntax support. Language extras beyond ES6 like the object spread operator. Import CSS and image files directly from JavaScript. Autoprefixed CSS, so you don’t need -webkit or other prefixes. A build script to bundle JS, CSS, and images for production, with sourcemaps. A dev server that lints for common errors. 
Getting Started
安装
<div class="cnblogs_code">
<pre>npm install -g create-react-app</pre>
</div>
 
 创建一个应用程序 
<div class="cnblogs_code">
<pre>create-react-app my-app
cd my-app</pre>
</div>
 生成的目录结构
<div class="cnblogs_code">
<pre>my-app/
README.md
node_modules/
package.json
.gitignore
public/
favicon.ico
index.html
src/
App.css
App.js
App.test.js
index.css
index.js
logo.svg</pre>
</div>
 
没有配置文件（webpack.config.js）
 
运行应用程序
<div class="cnblogs_code">
<pre>npm run start </pre>
</div>
or 
<div class="cnblogs_code">
<pre>yarn start</pre>
</div>
在浏览器中打开
<pre><code class="language-groovy">http://localhost:3000 </code></pre>
现在我们看 my-app文件夹下的public/index.html 和src/index.js的源码，我们可以在这里编写项目代码，但是注意 public/index.html 是启动http服务器的首页，src/index.js是编译的入口文件，只能叫index这个名字，改别的名字不行。 打开 http://localhost:3000/index.html 首页，f12查看网页源码，你会看到 
<div class="cnblogs_code">
<pre><script type="text/javascript" src="/static/js/bundle.js"></script></pre>
</div>
/static/js/bundle.js 在你的项目my-app你是看不到这个文件路径的，你也没有写配置文件webpack.config.js, http服务器配置,自动代开浏览器窗口，react，es6语法编译，babel-core，webpack，等等这些你都没下载，配置。 这些活，react-scripts 都帮你做了。

刚才的过程分析 
回顾  npm run start 我们一开始这么启动服务运行项目 打开你的my-app\package.json
<div class="cnblogs_code">
<pre>"scripts": {
"start": "react-scripts start",
 ...
}</pre>
</div>
所以执行的是 react-scripts start  打开你的my-app\node_modules\react-scripts这个文件夹下的bin文件夹下的react-scripts.js文件
<div class="cnblogs_code">
<pre>#!/usr/bin/env node
var spawn = require('cross-spawn');
var script = process.argv[2];
var args = process.argv.slice(3);

switch (script) {
case 'build':
case 'eject':
case 'start':
case 'test':
var result = spawn.sync(
'node',
.concat(args),
.......</pre>
</div>
上面代码中  script 的变量值是 start 所以执行 my-app\node_modules\react-scripts\scripts 文件夹下的  start.js 文件代码节选重点如下
<div class="cnblogs_code">
<pre>var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');// 启动http服务器
var paths = require('../config/paths');//要编译的文件路径与生成路径等
var config = require('../config/webpack.config.dev');
var DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000; //这就是为什么端口号不是8080 而是 3000 的原因，在这里可以改成8080，重新npm run start 生效 
detect(DEFAULT_PORT).then(port => {
if (port === DEFAULT_PORT) {
run(port); //这里开始运行
return;
}
......

function run(port) {
// 这里可以设置 http协议, 或者可以在 npm run start 之前 cmd命令窗口中执行 set HTTPS=true&&npm start 改成https 安全协议
var protocol = process.env.HTTPS === 'true' ? "https" : "http";
var host = process.env.HOST || 'localhost';
setupCompiler(host, port, protocol);// 编译源码，生成路径
runDevServer(host, port, protocol);//启动 http服务器
}</pre>
</div>
<pre><code class="language-javascript">

//配置http服务器</code></pre>
<div class="cnblogs_code">
<pre>function runDevServer(host, port, protocol) {
var devServer = new WebpackDevServer(compiler, {
compress: true,
clientLogLevel: 'none',
contentBase: paths.appPublic, //根据导入的paths 指定应用根目录（即index.html所在目录）
hot: true,

publicPath: config.output.publicPath, //根据导入的 config 变量,指定虚拟目录，自动指向path编译目录（/assets/ => /build/js/）。html中引用js文件时，
 //必须引用此虚拟路径（但实际上引用的是内存中的文件，既不是/build/js/也不是/assets/）。

quiet: true,

watchOptions: {
 ignored: /node_modules/
},
// Enable HTTPS if the HTTPS environment variable is set to 'true'
https: protocol === "https",
host: host
});
/**
* 省略其他代码
*/
openBrowser(protocol + '://' + host + ':' + port + '/'); // 打开浏览器向服务器发送请求
});
}

function setupCompiler(host, port, protocol) {

compiler = webpack(config, handleCompile);//根据导入的 config 变量指向的 webpack.config.dev 配置文件运行
/**
* 省略其他代码
*/
}</pre>
</div>
<pre><code class="language-javascript"> </code></pre>
 start.js 文件代码中导入了  my-app\node_modules\react-scripts\config文件夹下的  webpack.config.dev.js 与 paths.js paths.js  代码节选如下:
<div class="cnblogs_code">
<pre>var appDirectory = fs.realpathSync(process.cwd()); // 获取npm run start 运行所在的路径
function resolveApp(relativePath) {
return path.resolve(appDirectory, relativePath);
}

module.exports = {
appPath: resolveApp('.'),
ownPath: resolveApp('node_modules/react-scripts'),
appBuild: resolveApp('build'),
appPublic: resolveApp('public'),
appHtml: resolveApp('public/index.html'), //这就是一开始我们的项目要使用public/index.html作为默认首页
 //这里写什么文件名，项目中就要使用什么文件名包括也要有public文件夹
appIndexJs: resolveApp('src/index.js'), //编译的入口文件的文件名项目中要包括src文件夹
appPackageJson: resolveApp('package.json'),
appSrc: resolveApp('src'),
yarnLockFile: resolveApp('yarn.lock'),
testsSetup: resolveApp('src/setupTests.js'),
appNodeModules: resolveApp('node_modules'),
// this is empty with npm3 but node resolution searches higher anyway:
ownNodeModules: resolveOwn('node_modules'),
nodePaths: nodePaths,
publicUrl: getPublicUrl(resolveApp('package.json')),
servedPath: getServedPath(resolveApp('package.json'))
};
/**
* 省略其他代码
*/
webpack.config.dev.js代码节选如下:

var paths = require('./paths');//也导入了同文件夹下的 paths.js
module.exports = {entry: [ require.resolve('react-dev-utils/webpackHotDevClient'), require.resolve('./polyfills'), paths.appIndexJs // 编译的入口文件],output: { path: paths.appBuild, pathinfo: true, filename: 'static/js/bundle.js', // 只是编译后生成的目标文件，这就是一开始我们打开浏览器按f12看到的index.html导入的 //<script type="text/javascript" src="/static/js/bundle.js"></script> publicPath: publicPath},
/**
* 省略其他代码
*/

}</pre>
</div>
  
已经搭建好运行环境了，接下来如何开发app 导入组件 由于babel依赖，这个项目支持es6模块 当你仍然使用require() and module.exports ，我们鼓励你去使用import and export 替代. 例如: 
<div class="cnblogs_code">
<pre>Button.js

import React, { Component } from 'react';

class Button extends Component {
render() {
// ...
}
}
export default Button; // 不要忘记去使用 export default!

DangerButton.js

import React, { Component } from 'react';
import Button from './Button'; //从另一个文件导入一个组件

class DangerButton extends Component {
render() {
return <Button color="red" />;
}
}
export default DangerButton;</pre>
</div>
 
增加样式
<div class="cnblogs_code">
<pre>Button.css

.Button {
padding: 20px;
}
Button.js

import React, { Component } from 'react';
import './Button.css'; // 告诉webpack Button.js 使用这些样式

class Button extends Component {
render() {
// You can use them as regular CSS styles
return <div className="Button" />;
}
}

Autoprefixer</pre>
</div>
react-scripts 通过Autoprefixer 帮你的css文件自动添加浏览器兼容前缀 例如：
<div class="cnblogs_code">
<pre>.App {
display: flex;
flex-direction: row;
align-items: center;
}
变成

.App {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
 -ms-flex-direction: row;
 flex-direction: row;
-webkit-box-align: center;
 -ms-flex-align: center;
 align-items: center;
}</pre>
</div>
 
增加CSS预处理器
首先在 my-app/  目录下  安装node-sass用来将scss编译成css
<div class="cnblogs_code">
<pre>npm install node-sass --save-dev</pre>
</div>
打开my-app/package.json,增加以下代码到scripts中
<div class="cnblogs_code">
<pre> "scripts": {
+ "build-css": "node-sass src/ -o src/",
+ "watch-css": "npm run build-css && node-sass src/ -o src/ --watch",
"start": "react-scripts start",
"build": "react-scripts build",
......
}</pre>
</div>
 现在你可以重新命名my-app/<code>src/App.css</code> to my-app/<code>src/App.scss</code> and 运行   <code>npm run watch-css </code>或者你可以改成
<div class="cnblogs_code">
<pre>"scripts": {
"build-css": "node-sass src/ -o src/",
"start": "npm run build-css && react-scripts start",//先执行 build-css 再执行 react-scripts start
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}</pre>
</div>
直接 npm run start 增加图片
<div class="cnblogs_code">
<pre>import React from 'react';
import logo from './logo.png'; // 告诉webpack 这个js文件使用这张图片

console.log(logo); // /logo.84287d09.png会改变图片的名字

function Header() {
//导入结果是这个图片的url地址
return <img src={logo} alt="Logo" />;
}

export default Header;</pre>
</div>
当项目构建的时候，Webpack将正确的移动图片到构建的文件夹下，提供我们正确的路径
 
在css工作中的方式也一样
<div class="cnblogs_code">
<pre>.Logo {
background-image: url(./logo.png);
}</pre>
</div>
webpack发现所有的相对模块，以 ./  开始 
增加 bootstrap 在react+es6 moudle+bootstrap 你不是一定要React Bootstrap和React 一起使用，但是他是流行的库去整合 bootstrap 和react应用程序，如果你需要他，你可以通过Create React App整合他，通过以下几个步骤
首先安装React Bootstrap and Bootstrap从npm，React Bootstrap 不包括Bootstrap CSS ，所以你需要去安装 在 my-app/  目录下  安装
<pre><code class="language-sql">npm install react-bootstrap --save
npm install bootstrap@3 --save</code></pre>
 
修改 my-app/src/index.js 在你的src/index.js 文件内容的顶部，导入 Bootstrap CSS 和可选的 Bootstrap theme CSS
<div class="cnblogs_code">
<pre>import React from 'react';
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.css';// 必须的
import 'bootstrap/dist/css/bootstrap-theme.css';//可选的
import App from './App';
import './index.css';

ReactDOM.render(
<App />,
document.getElementById('root')
);</pre>
</div>
修改 my-app/src/App.js
<div class="cnblogs_code">
<pre>import React, { Component } from 'react';
import { Grid, Navbar, Jumbotron, Button } from 'react-bootstrap';

class App extends Component {
render() {
return (
 <div>
 <Navbar inverse fixedTop>
 <Grid>
 <Navbar.Header>
 <Navbar.Brand>
 <a href="/">React App</a>
 </Navbar.Brand>
 <Navbar.Toggle />
 </Navbar.Header>
 </Grid>
 </Navbar>
 <Jumbotron>
 <Grid>
 <h1>Welcome to React</h1>
 
 <Button
 bsStyle="success"
 bsSize="large"
 href="http://react-bootstrap.github.io/components.html"
 target="_blank">
 View React Bootstrap Docs
 </Button>
 
 </Grid>
 </Jumbotron>
 </div>
);
}
}

export default App;</pre>
</div>
最后运行
<div class="cnblogs_code">
<pre>npm run start</pre>
</div>
  
来源：https://www.cnblogs.com/it-Ren/p/13458930.html

頁: [1]

琼殿技术论坛's Archiver

使用create-react-app 构建react应用(react-scripts)