npm 包 intsol-react-scripts 使用教程-JavaScript中文网-JavaScript教程资源分享门户

介绍

在项目中使用 React 和 Webpack 时，我们通常会使用 Create React App（CRA）作为项目的初始化工具。CRA 封装了 Webpack 的配置并提供了一个简单易用的开发环境。但是，有时我们需要修改 CRA 的默认配置以适应我们的项目需求。这时，可以使用 npm 包 intsol-react-scripts，它提供了对 CRA 的自定义配置支持。

特性

CRA 使用 react-scripts 来管理 Webpack 配置。intsol-react-scripts 基于 react-scripts 进行二次封装，提供了以下功能：

支持自定义 Webpack 配置，通过 config-overrides.js 文件来修改 CRA 默认配置。
额外支持了 TypeScript 和 Sass，无需手动配置。
支持在开发模式下使用环境变量，方便不同环境下的调试。

安装

使用 npm 安装：

npm install intsol-react-scripts

或者使用 yarn 安装：

yarn add intsol-react-scripts

使用

自定义 Webpack 配置

在项目根目录下，创建一个 config-overrides.js 文件，你可以重写 Create React App 中默认的 Webpack 配置。例如，下面的配置告诉 Webpack 在打包时输出分析报告：

-- -------------------- ---- -------
----- -------------------- - --------------------------------------------------------

-------------- - -------- ---------------- ---- -

  -- ---- --- ------------- -
    -- -- -------------------- --
    ----------------------- ------------------------
  -

  ------ -------
-

详细的 Webpack 配置请参考 Webpack 文档。

TypeScript 支持

intsol-react-scripts 默认开启了 TypeScript 的支持，只需把 .js 文件改成 .ts 或 .tsx 文件，Webpack 会自动处理 TypeScript 代码。

Sass 支持

同样的，intsol-react-scripts 默认开启了 Sass 支持，可直接在代码中使用 .scss 后缀。

环境变量

我们可以通过 .env 文件设置环境变量。例如，我们可以创建一个名为 .env.development 的环境变量文件，以指定开发模式下的 API 地址：

REACT_APP_API_URL=http://localhost:3000/api

在代码中可以通过 process.env.REACT_APP_API_URL 来获取该值。

示例

我们来创建一个使用 intsol-react-scripts 的示例项目。首先，我们需要在电脑上安装 Node.js 和 npm（或者 Yarn）。打开命令行，执行以下命令：

npx create-react-app my-app --scripts-version intsol-react-scripts

这将在当前目录下创建一个名为 my-app 的新项目，并使用 intsol-react-scripts 作为开发环境。

然后，我们在项目根目录下创建一个新的 Homepage.tsx 文件：

-- -------------------- ---- -------
------ ----- ---- --------
------ ------------------

-------- ---------- -
  ------ -
    ---- ---------------------
      -----------------
    ------
  --
-

------ ------- ---------

接着，我们在同级目录下创建一个名为 Homepage.scss 的样式文件：

.homepage {
  h1 {
    color: #f60;
  }
}

最后，在 App.tsx 中引入 Homepage 组件并渲染即可：

import React from 'react';
import Homepage from './Homepage';

function App() {
  return <Homepage />;
}

export default App;

现在，我们启动开发服务器：

npm start

或：

yarn start

打开浏览器访问 http://localhost:3000 即可看到项目页面。

结语

intsol-react-scripts 让我们能够使用 CRA 的便利性，同时又能够自定义 Webpack 配置，以满足项目需求。希望这篇文章能帮助你快速掌握 intsol-react-scripts 的使用方法。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60066b5651ab1864dac66b5c