react打包成html5,create-react-app项目打包相关问题
Q1. yarn build打包生成的文件直接点击index.html报错，打不开，导致的问题是yarn build打包生成的文件部署到服务器时只能在服务器根目录，如果在其他文件夹里面会报错
A1:
默认情况下，index.html中引入js和css的方式是，需要在本地启一个服务器才行，即在打包文件根目录下打开命令行，输入http-server，即可通过localhost:8080来访问到项目。
解决办法是：
1.将所有引入资源文件的地方路径改为./，eg:，即可通过直接点击index.html来打开项目。
2.打包前在package.json文件里添加一个配置："homepage":"."，打包之后资源文件路径前面都会加上一个点
{
"name": "test04",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.0.0",
"react-dom": "^16.0.0",
"react-scripts": "1.0.17"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"homepage":"."
}
这样直接点开会有一个报错
registerServiceWorker.js:71 Error during service worker registration: DOMException: Failed to register a ServiceWorker: The URL protocol of the current origin ('null') is not supported.
原因是serviceWorker不支持//这种协议，需要放到https或者localhost下才行。参考网址
打包时默认执行react-script模块下的一些脚本配置文件，所以直接找到并修改这些文件也是可行的
具体路径是：项目文件夹\node_modules\react-scripts\config里面的paths.js文件
function getServedPath(appPackageJson) {
const publicUrl = getPublicUrl(appPackageJson);
const servedUrl =
envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : './');
return ensureSlash(servedUrl, true);
}
pathname改成./就可以了。参考网址
如果页面中引用了很多资源文件图片、视频、字体等，不可能一个个去自动建立好的文件里去找再修改路径，这时就可以在yarn build命令前设置PUBLIC_URL。
windows系统下：
set PUBLIC_URL=./ yarn build
mac、linux系统下：
PUBLIC_URL=./ yarn build
参考网址
Q2. 如何修改create-react-app的配置
A2:
现在 如果你正在搭建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文件识别 。
按需加载参考链接：
引入 react-app-rewired并修改 package.json 里的启动配置:
$ yarn add react-app-rewired --dev
/* package.json */
"scripts": {
- "start": "react-scripts start",
+ "start": "react-app-rewired start",
- "build": "react-scripts build",
+ "build": "react-app-rewired build",
- "test": "react-scripts test --env=jsdom",
+ "test": "react-app-rewired test --env=jsdom",
}
然后在项目根目录创建一个 config-overrides.js 用于修改默认配置。
module.exports = function override(config, env) {
// do stuff with the webpack config...
return config;
};
使用 babel-plugin-import, babel-plugin-import是一个用于按需加载组件代码和样式的 babel 插件(原理)，现在我们尝试安装它并修改 config-overrides.js 文件。
yarn add babel-plugin-import --dev
+ const { injectBabelPlugin } = require('react-app-rewired');
module.exports = function override(config, env) {
+ config = injectBabelPlugin(['import', { libraryName: 'antd-mobile', style: 'css' }], config);
return config;
};
更改引用方式
- import Button from 'antd-mobile/lib/button';
+ import { Button } from 'antd-mobile';
LESS文件处理：
两种方式：
使用react-app-rewire-less插件。npm install --save react-app-rewire-less。
然后在项目根目录下创建 config-overrides.js文件，添加如下内容：
const rewireLess = require('react-app-rewire-less');
/* config-overrides.js */
module.exports = function override(config, env) {
config = rewireLess(config, env);
return config;
}
官方的参考链接：
First, let’s install the command-line interface for Sass:
npm install --save node-sass-chokidar
Alternatively you may use yarn:
yarn add node-sass-chokidar
Then in package.json, add the following lines to scripts:
"scripts": {
+ "build-css": "node-sass-chokidar src/ -o src/",
+ "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
通过npm run eject来暴露所有的配置文件
转到自定义配置
如果你是重度用户 并且对默认配置不满意，你可以从工具中退出，并像样板生成器一样使用它。
运行 npm run eject 复制所有依赖文件和相应依赖 (Webpack、Babel、ESLint 等等) 到你的项目，因此完全可控。类似 npm start 和 npm run build 的命令依旧会工作， 但他们会指向复制的脚本，因此你可以调整。在这一点上，你只能靠自己。
注: 这是个单向操作。一旦 eject，你就回不去啦!
你可能不需要使用 eject。 这个功能集适合中小型部署，而且你不应该感到有义务使用此功能。但是，我们明白如果你无法自定义该工具，那么它将不会有用。参考网址
下面介绍如何修改暴露之后的配置文件来解决直接点击index.html报错问题
项目文件/config/paths.js修改如下：
function getServedPath(appPackageJson) {
const publicUrl = getPublicUrl(appPackageJson);
const servedUrl =
envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : './');
return ensureSlash(servedUrl, true);
}
pathname值改为./
下面介绍修改修改暴露之后的文件解决antd样式丢失问题：
项目文件/config/webpack.config.dev.js和项目文件/config/webpack.config.prod.js两个文件对应位置加上
"plugins": [
["import", {"libraryName": "antd-mobile", "style": "css"}],
],
修改之后是这样：
// Process JS with Babel.
{
test: /\.(js|jsx|mjs)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
"plugins": [
["import", {"libraryName": "antd-mobile", "style": "css"}],
],
compact: true,
},
},