其他分享
首页 > 其他分享> > 利用create-react-app从零开始搭建React移动端环境

利用create-react-app从零开始搭建React移动端环境

作者：互联网

一 开始

1 全局安装脚手架

npm install -g create-react-app

这有个坑，就是在window下安装一直会报错，报错信息如下：

解决办法：在开始菜单栏里打开cmd的时，右击选择“以管理员身份运行”。然后再在打开的cmd里运动install就没问题了。

 

2 通过脚手架搭建项目

create-react-app <项目名称>

 

3 开始项目

cd <项目名>
npm run start

 

二、 查看项目 package.json 信息

1  package.json 一览

{
  ......
  "homepage": ".",
  "dependencies": {
    "react": "^16.4.0",
    "react-dom": "^16.4.0",
    "react-scripts": "1.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

　　

2 可用命令说明：

三、 自动生成的项目目录以及文件解析：

四   create-react-app 扩展webpack的方法

Create React App（以下简称 CRA）是创建 React 应用的一个脚手架，它与其他脚手架不同的一个地方就是将一些复杂工具（比如 webpack）的配置封装了起来，让使用者不用关心这些工具的具体配置，从而降低了工具的使用难度。但是对于一些熟悉 webpack 的开发者来说，他们可能想对 webpack 配置做一些修改，这个时候应该怎么办呢？我们可以通过项目eject来进行

使用 CRA 创建完项目以后，项目在package.json里面提供了这样一个命令：

{
...
"scripts": {
"eject": "react-scripts eject"
},
...
}

执行完这个命令——yarn run eject后会将封装在 CRA 中的配置全部反编译到当前项目，这样用户就可以完全取得 webpack 文件的控制权，想怎么修改就怎么修改了。

踩坑） 使用create-react-app命令创建一个react项目，运行npm run eject生成配置文件，报了下面的错：

Remove untracked files, stash or commit any changes, and try again.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! test@0.1.0 eject: `react-scripts eject`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the test@0.1.0 eject script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\lenovo\AppData\Roaming\npm-cache\_logs\2018-11-01T04_03_50_129Z-debug.log

主要问题是脚手架添加.gitgnore文件，但是却没有本地仓库，按照以下顺序就可以正常使用

　

create-react-app test
cd test
git init
git add .
git commit -m 'Saving before ejecting'
npm run eject

 

五 添加对 less 的支持

安装依赖

npm install less-loader less -dev

 

通过npm run eject暴露出配置时候，webpack配置文件只有webpack.config.js，

但没有webpack.config.dev.js和webpack.config.prod.js,查看网上各种解决办法后，发现是因为create-react-app官方脚手架升级了。

这里我们就在webpack.config.js配置less。

方法：

//找到此位置
// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
 
//在此添加如下两个常量
const lessRegex =/\.less$/;
const lessModuleRegex=/\.module\.less$/;
 
// This is the production and development configuration.
// It is focused on developer experience, fast rebuilds, and a minimal bundle
//找到此位置
 {
              test: cssRegex,
              exclude: cssModuleRegex,
              use: getStyleLoaders({
                importLoaders: 1,
                sourceMap: isEnvProduction && shouldUseSourceMap,
              }),
              // Don't consider CSS imports dead code even if the
              // containing package claims to have no side effects.
              // Remove this when webpack adds a warning or an error for this.
              // See https://github.com/webpack/webpack/issues/6571
              sideEffects: true,
            },
            // Adds support for CSS Modules (https://github.com/css-modules/css-modules)
            // using the extension .module.css
            {
              test: cssModuleRegex,
              use: getStyleLoaders({
                importLoaders: 1,
                sourceMap: isEnvProduction && shouldUseSourceMap,
                modules: true,
                getLocalIdent: getCSSModuleLocalIdent,
              }),
            },
 
//在这之后仿照上面添加如下代码
            {
              test: lessRegex,
              exclude: lessModuleRegex,
              use: getStyleLoaders({
                importLoaders: 2,
                sourceMap: isEnvProduction && shouldUseSourceMap,
              }),
              sideEffects: true,
            },
            {
              test: lessModuleRegex,
              use: getStyleLoaders({
                importLoaders: 2,
                modules: true,
                getLocalIdent: getCSSModuleLocalIdent,
                sourceMap: isEnvProduction && shouldUseSourceMap,
              }),
            },

 

配置变了之后要重新启动，不然无法看到效果。

六  在 create-react-app 中使用antd-mobile

1 安装

npm install antd-mobile --save

2 使用

入口页面 (html 或 模板) 相关设置：

引入 FastClick 并且设置 html meta (更多参考 #576)

引入 Promise 的 fallback 支持 (部分安卓手机不支持 Promise)

<!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>

 

3 按需加载：

使用 babel-plugin-import（推荐）。

npm install babel-plugin-import --save-dev

在package.json中添加如下代码：

  "plugins": [
      [
        "import",
        {
          "libraryName": "antd-mobile",
          "libraryDirectory": "es",
          "style": "css"
        }
      ]
   ]

然后只需从 antd-mobile 引入模块即可，无需单独引入样式。

// babel-plugin-import 会帮助你加载 JS 和 CSS
import { DatePicker } from 'antd-mobile';

 

七 实现对修饰器的支持： 实现对 babel 插件的使用

假设当前 Babel >= 7.x， 如果你的 Babel < 7.x 则需要将 ["@babel/plugin-proposal-decorators", {"legacy": true}] 修改为 ["transform-decorators-legacy"]
修改package.json
"babel": {"plugins": [
+   ["@babel/plugin-proposal-decorators", {"legacy": true}]
  ]
},

 

八  eslint 配置

标签：npm,react,run,eject,create,React,webpack,test
来源： https://www.cnblogs.com/alice626/p/10967825.html