( 一 ) 脚手架create-react-app使用

2018-12-27 本文已影响0人 JennyGao66

一、脚手架create-react-app使用

$ npm install -g create-react-app

# 注意：工具会自动初始化一个脚手架并安装 React 项目的各种必要依赖，如果在过程中出现网络问题，请尝试配置代理或使用其他 npm registry。
$ create-react-app my-app

$ cd my-app
$ npm start

打开 http://localhost:3000/ 访问你的应用。

二、引入 antd-mobile

npm install antd-mobile --save

修改 index.html

<!DOCTYPE html>
<html>
<head>
  <!-- set `maximum-scale` for some compatibility issues -->
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
  <script src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></script>
  <script>
    if ('addEventListener' in document) {
      document.addEventListener('DOMContentLoaded', function() {
        FastClick.attach(document.body);
      }, false);
    }
    if(!window.Promise) {
      document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"'+'>'+'<'+'/'+'script>');
    }
  </script>
</head>
<body></body>
</html>

fastclick.js是解决移动端300ms延迟的方案。
有些浏览器不支持promise，需要引入es6-promise支持

Q2. 如何修改create-react-app的配置

现在如果你正在搭建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-app-rewired插件，react-app-rewired的作用就是在不eject的情况下，覆盖create-react-app的配置。如果已经eject导出了配置，就没有必要使用react-app-rewired。使用插件的方法见官方文档,插件的相关介绍见参考网址

这个插件可以在不更改原始配置脚本的前提下更改默认配置，加一些plugins, 或者loaders，比如antd按需加载样式、less文件识别。

create-react-app项目打包相关问题
 Create-React-App创建antd-mobile开发环境

成功完成步骤

按照官网步骤
在 create-react-app 中使用

安装和初始化#

我们需要在命令行中安装 create-react-app 工具，你可能还需要安装 yarn。

$ npm install -g create-react-app yarn

然后新建一个项目。

$ create-react-app antd-demo

工具会自动初始化一个脚手架并安装 React 项目的各种必要依赖，如果在过程中出现网络问题，请尝试配置代理或使用其他 npm registry。

然后我们进入项目并启动。

$ cd antd-demo
$ yarn start

此时浏览器会访问 http://localhost:3000/ ，看到 Welcome to React 的界面就算成功了。

引入 antd#

这是 create-react-app 生成的默认目录结构。

├── README.md
├── package.json
├── public
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   └── logo.svg
└── yarn.lock

现在从 yarn 或 npm 安装并引入 antd。

$ yarn add antd --save

修改 src/App.js，引入 antd 的按钮组件。

import React, { Component } from 'react';
import { Button } from 'antd';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <Button type="primary">Button</Button>
      </div>
    );
  }
}

export default App;

修改 src/App.css，在文件顶部引入 antd/dist/antd.css。

@import '~antd/dist/antd.css';

.App {
  text-align: center;
}

...

好了，现在你应该能看到页面上已经有了 antd 的蓝色按钮组件，接下来就可以继续选用其他组件开发应用了。其他开发流程你可以参考 create-react-app 的官方文档。

高级配置(按官网,我的项目报错)

我们需要对 create-react-app 的默认配置进行自定义。可以使用 eject 命令将所有内建的配置暴露出来。

yarn run eject

按需加载

babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件（原理），现在我们尝试安装它并修改 config/webpack.config.dev.js 文件。

$ yarn add babel-plugin-import --save-dev

注意，由于 create-react-app eject 之后的配置中没有 .babelrc 文件，所以需要把配置放到 webpack.config.js 或 package.json 的 babel 属性中。
然后按照官网的修改config/webpack.config.dev.js报错(只有config/webpack.config.js)
所以在网上查找了另一种方式,修改package.json文件

安装完antd和babel-plugin-import后，修改根目录下的package.json babel处新增

"plugins":[["import", {"libraryName": "antd", "style": "css"}]]

"babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      [
        "import",
        {
          "libraryName": "antd",
          "style": "css"
        }
      ]
    ]
  }

npm run install 后再启动项目 npm run start
能够安全启动
选自create-react-app 按需加载antd出错问题解决

( 一 ) 脚手架create-react-app使用