create-react-app项目打包相关问题

2017-11-09 本文已影响8440人 Ysj1111

Q1. yarn build打包生成的文件直接点击index.html报错，打不开，导致的问题是yarn build打包生成的文件部署到服务器时只能在服务器根目录，如果在其他文件夹里面会报错

A1:

默认情况下，index.html中引入js和css的方式是<script type="text/javascript" src="/static/js/main.86163e33.js"></script>，需要在本地启一个服务器才行，即在打包文件根目录下打开命令行，输入http-server，即可通过localhost:8080来访问到项目。

解决办法是：
1.将所有引入资源文件的地方路径改为./，eg:<script type="text/javascript" src="./static/js/main.86163e33.js"></script>，即可通过直接点击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,
            },
          },

create-react-app项目打包相关问题

Q1. yarn build打包生成的文件直接点击index.html报错，打不开，导致的问题是yarn build打包生成的文件部署到服务器时只能在服务器根目录，如果在其他文件夹里面会报错

A1:

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

A2:

猜你喜欢

热点阅读