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

绝版佳佳 發表於 2019-6-3 15:28:00

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

一开始
1 全局安装脚手架
<div class="cnblogs_code">
<pre>npm install -g create-react-app</pre>
</div>
这有个坑，就是在window下安装一直会报错，报错信息如下：
<img src="https://img2018.cnblogs.com/blog/745803/201906/745803-20190603135007083-1578710147.png">
解决办法：在开始菜单栏里打开cmd的时，右击选择“以管理员身份运行”。然后再在打开的cmd里运动install就没问题了。
 
2 通过脚手架搭建项目
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">create-react-app <项目名称>
</pre>
</div>
 
3 开始项目
<div class="cnblogs_code">
<pre>cd <项目名>
npm run start</pre>
</div>
 
<h2 class="heading" data-id="heading-1">二、查看项目 package.json 信息</h2>
1  package.json 一览
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">{
......
"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"
}
}
</pre>
</div>
　　
2 可用命令说明：
<div>
<div>
<ul>
<li>首先说明：通过npm run 执行下面命令实际上是运行 node_modules/react-srcipt/script 下对应的脚本文件；</li>
<li>npm run start: 开始项目，运行项目后可通过 <code>http://localhost:3000</code> 访问项目；</li>
<li>npm run build: 项目打包，在生产环境中编译代码，并放在build目录中；所有代码将被正确打包，并进行优化、压缩同时使用hash重命名文件；执行该命令前需要在 package.json 中新增条配置<code>"homepage": "."</code>（上面配置文件已给出）, 同时build后的项目需要在服务器下才能访问；否则打开的将是空白页面；</li>
<li>npm run test: 交互监视模式下启动测试运行程序；</li>
<li>npm run eject: 将隐藏的配置导出；需要知道的是create-react-app脚手架本质上是使用react-scripts进行配置项目，所有配置文件信息都被隐藏起来(node_modules/react-scripts)；当需要手动修改扩展webpack配置时有时就需要将隐藏的配置暴露出来；特别需要注意的是该操作是一个单向操作，一旦使用eject，那么就不能恢复了(再次将配置隐藏)；</li>
</ul>
</div>
<h2 class="heading" data-id="heading-4">三、自动生成的项目目录以及文件解析：</h2>
<div>
<div>
<ul>
<li>node_modules : 项目依赖包目录；</li>
<li>public: 公共目录，该目录下的文件都不会被webpack进行加载、解析、打包；通过npm run build进行打包时该项目下的所有文件将会直接被复制到build目录下；
<ul>
<li>favicon.ico : 是网站图标[可替换删除]</li>
<li>index.html: 页面模板，webpack打包后将输出文件引入到该模板内；补充：index.html中通过环境变量<code>%PUBLIC_URL%</code> 来指向public目录路径；</li>
<li>manifest.json: PWA将应用添加至桌面的功能的实现依赖于 manifest.json 。通过manifest.json 文件可以对图标、名称等信息进行配置。</li>
</ul>
</li>
<li>src: 是源码目录该目录下除了index.js App.test.js registerServiceWorker.js 文件具有一定意义其余文件都是演示使用可直接删除
<ul>
<li>index.js: 是整个项目的入口文件；</li>
<li>App.test.js: 测试单元演示文件，暂时并不知道干嘛用；可以直接删除；</li>
<li>registerServiceWorker.js: service worker 是在后台运行的一个线程，可以用来处理离线缓存、消息推送、后台自动更新等任务；registerServiceWorker就是为react项目注册了一个service worker，用来做资源的缓存，这样你下次访问时，就可以更快的获取资源。而且因为资源被缓存，所以即使在离线的情况下也可以访问应用（此时使用的资源是之前缓存的资源）。注意，registerServiceWorker注册的service worker 只在生产环境中生效，并且该功能只有在https下才能有效果；</li>
</ul>
</li>
<li>.gitignore: 该文件是github过滤文件配置</li>
<li>README.md: 该文件是github描述文件</li>
<li>package.json: 定义了项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。部分依赖模块被隐藏；</li>
<li>yarn.lock：每次通过yarm添加依赖或者更新包版本时 yarn都会把相关版本信息写入yarn.lock文件；npm也有类似功能，npm 也可以生成一个锁文件，就是使用上没有yarn方便</li>
</ul>
</div>
</div>
<h2>四   create-react-app 扩展webpack的方法</h2>
</div>
Create React App（以下简称 CRA）是创建 React 应用的一个脚手架，它与其他脚手架不同的一个地方就是将一些复杂工具（比如 webpack）的配置封装了起来，让使用者不用关心这些工具的具体配置，从而降低了工具的使用难度。但是对于一些熟悉 webpack 的开发者来说，他们可能想对 webpack 配置做一些修改，这个时候应该怎么办呢？我们可以通过项目eject来进行
使用 CRA 创建完项目以后，项目在<code>package.json</code>里面提供了这样一个命令：
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">{
...
"scripts": {
"eject": "react-scripts eject"
},
...
}
</pre>
</div>
执行完这个命令——<code>yarn run eject</code>后会将封装在 CRA 中的配置全部<code>反编译</code>到当前项目，这样用户就可以完全取得 webpack 文件的控制权，想怎么修改就怎么修改了。
踩坑） 使用create-react-app命令创建一个react项目，运行npm run eject生成配置文件，报了下面的错：
<div class="cnblogs_code">
<pre>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</pre>
</div>
主要问题是脚手架添加.gitgnore文件，但是却没有本地仓库，按照以下顺序就可以正常使用
　
<div class="cnblogs_Highlighter">
<pre class="brush:bash;gutter:true;">create-react-app test
cd test
git init
git add .
git commit -m 'Saving before ejecting'
npm run eject
</pre>
</div>
<h2> </h2>
<h2>五添加对 less 的支持</h2>
安装依赖
<div class="cnblogs_code">
<pre>npm install less-loader less -dev</pre>
</div>
 
通过npm run eject暴露出配置时候，webpack配置文件只有webpack.config.js，
但没有webpack.config.dev.js和webpack.config.prod.js,查看网上各种解决办法后，发现是因为create-react-app官方脚手架升级了。
这里我们就在webpack.config.js配置less。
方法：
<div class="cnblogs_code">
<pre>//找到此位置
// 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</pre>
</div>
<div class="cnblogs_code">
<pre>//找到此位置
 {
 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,
 }),
 },</pre>
</div>
 
配置变了之后要重新启动，不然无法看到效果。
<h2>六  在 create-react-app 中使用antd-mobile</h2>
1 安装
<div class="cnblogs_code">
<pre>npm install antd-mobile --save</pre>
</div>
2 使用
入口页面 (html 或模板) 相关设置：
<blockquote>
引入 FastClick 并且设置 html <code>meta</code> (更多参考 #576)
引入 Promise 的 fallback 支持 (部分安卓手机不支持 Promise)
</blockquote>
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html>
<head>

<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></pre>
</div>
 
3 按需加载：
使用 babel-plugin-import（推荐）。
<div class="cnblogs_code">
<pre>npm install babel-plugin-import --save-dev</pre>
</div>
在package.json中添加如下代码：
<div class="cnblogs_code">
<pre>"plugins": [
 [
 "import",
 {
 "libraryName": "antd-mobile",
 "libraryDirectory": "es",
 "style": "css"
 }
 ]
]</pre>
</div>
然后只需从 antd-mobile 引入模块即可，无需单独引入样式。
<div class="cnblogs_code">
<pre>// babel-plugin-import 会帮助你加载 JS 和 CSS
import { DatePicker } from 'antd-mobile';</pre>
</div>
 
<h2>七 实现对修饰器的支持：实现对 babel 插件的使用</h2>
<div>
<div>假设当前 Babel >= 7.x，如果你的 Babel < 7.x 则需要将 <code>["@babel/plugin-proposal-decorators", {"legacy": true}]</code> 修改为 <code>["transform-decorators-legacy"]</code></div>
 修改package.json</div>
<div>
<div class="cnblogs_code">
<pre>"babel": {"plugins": [
+ ["@babel/plugin-proposal-decorators", {"legacy": true}]
]
},</pre>
</div>
 
<h2>八  eslint 配置</h2>
<ul>
<li>通过修改 package.json 文件添加对 eslint 的扩展配置
<div class="cnblogs_code">
<pre>...
"eslintConfig": {
// 默认继承脚手架自带的 eslint 配置
"extends": "react-app",
// 在这里扩展新增配置
"rules":{
// 设置规则，具体看官网用户指南下的规则文档
"eqeqeq": "off"
}
}</pre>
</div>
 
</li>
<li>
参考文档：https://juejin.im/post/5b20a3546fb9a01e312833d5                  https://www.jianshu.com/p/fa79cbfa6c6c                  https://blog.csdn.net/qq_36709020/article/details/80275602                 https://blog.csdn.net/qq_42190134/article/details/88528852                 https://ant.design/docs/react/use-with-create-react-app-cn                             

</li>

</ul>

</div> 
来源：https://www.cnblogs.com/alice626/p/10967825.html

頁: [1]

琼殿技术论坛's Archiver

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