离线安装typescript-zhao/cjet：基于React生态构建后端项目的工具

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

代码分割

随着应用需求的下降，包文件也会急剧减少，特别是对于小型应用的开发，会影响用户访问的加载性能。 cjet 支持代码分割，允许您将代码分割成小块并按需加载。

cjet 支持通过 . 这是第 3 阶段的提案。 import() 函数形式接受模块名称作为参数，并且 Promise 始终解析为模块的名称空间对象。

moduleDemo.js

const moduleDemo = "Hello";
export { moduleDemo };

应用程序.js

{import("./moduleDemo").then(({ moduleDemo }) => {// 使用 moduleDemo}).catch((err) => {// 处理失败}); }; 渲染（）{返回（

加载

）； }}导出默认应用程序；">

import React, { Component } from "react";
class App extends Component {
  handleClick = () => {
    import("./moduleDemo")
      .then(({ moduleDemo }) => {
        // Use moduleDemo
      })
      .catch((err) => {
        // Handle failure
      });
  };
  render() {
    return (
      <div>
        <button onClick={this.handleClick}>Load</button>
      </div>
    );
  }
}
export default App;

这将使 moduleDemo.js 及其所有唯一依赖项成为一个单独的块，仅在用户单击“加载”按钮后才会加载。 您还可以在代码中使用 async/await 语法。

基于路由的代码分割

如果您的项目中使用了 React Router，请参考：Understanding Code Splitting，或者 React 官方文档：Code-Splitting。 您还可以使用react-loadable 或loadable-components。

预加载和预取

预载

当浏览器遇到富含preload的链接标签时，会立即开始下载main.js（不会阻塞解析器）并将其放入显存中，但不会执行其中的JS语句。 预加载表示页面加载后立即需要哪些资源。 对于这些立即需要的资源，您可能希望在页面加载生命周期的早期开始获取它们，在浏览器的主渲染机制干预之前预加载它们。 这种机制使得资源能够更早地加载和可用，并且不太可能阻塞页面的初始渲染，从而提高性能。

<link rel="preload" href="/main.js" as="script" />

预取

浏览器空闲时会下载main.js，并将其缓存到磁盘。 当使用页面时，直接从磁盘缓存中读取该页面。

<link href="main.js" rel="prefetch" />

默认情况下，cjet 在创建项目时已手动添加预加载和预取代码。 如果个别场景不需要该功能，可以通过cjet.config.js关闭。

//cjet.config.js
module.exports = {
  html: {
    /**
     * 启用 preload
     * 构建项目自动加入preload方案
     */
    preload: true,
    /**
     * 启用 prefetch
     * 构建项目自动加入prefetch方案
     */
    prefetch: true,
  },
};

Cjet项目减少了preload和prefetch的机制

使用公用文件夹

放置在公共文件夹中的任何静态资源将被简单地复制而无需任何编译。 为了引用公共文件夹中的资源，使用了一个名为 PUBLIC_URL 的特殊变量。

在 html 模板中使用

<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />

JavaScript 代码使用

render() {
  // 注意：这是一个逃生舱（escape hatch），应该谨慎使用！
  // 通常我们建议使用`import`来获取资源的 URL
  // 如我们上一节 “添加图片和字体”中所述。
  return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />;
}

cjet 建议将资源导出为模块依赖关系图的一部分，这样它们将被项目编译处理并获得以下好处：

何时使用公共

使用 PWA（开发渐进式 Web 应用程序）

cjet 集成了业界开发一流渐进式 Web 应用程序的最佳实践。 该项目包含用于开发渐进式应用程序的 src/serviceWroker.js 文件。 应用入口脚本（src/index.tsx）默认状态是不可用注册，如果想使用PWA离线安装typescript，需要在应用入口将serviceWorker.unregister()改为serviceWorker.register()。

随着行业内PWA相关技术的不断升级和优化，在用户体验和用户留存方面提供了非常好的解决方案。 PWA 可以结合 Web 和 App 各自的优点：渐进式、响应式、离线、类似应用程序的交互、即时更新、安全性、搜索引擎检索、可推送、可安装和可链接。 其主要特点：

本项目使用cjet作为项目构建工具，项目框架集成了workbox-webpack-plugin，它将负责生成serviceworker文件，该文件会手动预缓存所有本地资源离线安装typescript，并在运行时保持最新。部署更新。 Service Worker 将使用缓存优先策略来处理对本地资源的所有请求，包括 HTML 导航请求，确保您的 Web 应用程序保持快速，即使在缓慢或不可靠的网络上也是如此。

workbox-webpack-plugin 的更多中间配置可以通过 cjet.config.js 文件完成：

//cjet.config.js
module.exports = {
  /**
   * PWA的workbox-webpack-plugin配置
   * More info see: https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin
   */
  pwa: {
    mode: "GenerateSW", // GenerateSW or InjectManifest
    options: {
      clientsClaim: true,
      exclude: [/.map$/, /asset-manifest.json$/],
      importWorkboxFrom: "cdn",
      navigateFallback: "/index.html",
      navigateFallbackBlacklist: [
        // Exclude URLs starting with /_, as they're likely an API call
        new RegExp("^/_"),
        // Exclude any URLs whose last part seems to be a file extension
        // as they're likely a resource and not a SPA route.
        // URLs containing a "?" character won't be blacklisted as they're likely
        // a route with query params (e.g. auth callbacks).
        new RegExp("/[^/?]+\.[^/]+$"),
      ],
    },
  },
};

开发渐进式应用程序 (PWA) 的注意事项

开发渐进式 Web 应用程序使调试部署更具挑战性，如果您决定选择 Service Worker 注册，请考虑以下激励措施：

渐进式 Web 应用程序元数据

默认配置包括位于 public/manifest.json 的 Web 应用程序清单，您可以使用特定于您的 Web 应用程序的详细信息对其进行自定义。

当用户使用 Android 上的 Chrome 或 Firefox 将 Web 应用程序添加到主屏幕时，manifest.json 中的元数据可以设置用于显示 Web 应用程序的图标、名称和品牌颜色。 Web 应用程序清单指南提供了有关每个数组的含义以及您的自定义将如何影响用户体验的更多信息。

当 Service Worker 被激活时，已添加到主屏幕的渐进式 Web 应用程序将加载得更快并且可以离线工作。 话虽如此，无论您是否选择注册 Service Worker，Web 应用程序清单中的元数据仍然会被使用。

网页包配置

cjet项目使用webpack作为模块打包工具。 根据众多业务场景，集成了大量业界开发React项目的最佳实践配置，让您在开发企业级项目时享受零配置的工程体验，同时依然支持高度灵活的可配置属性，打造在根目录下新建webpack.config.js，并输出一个配置对象：

//webpack.config.js
const path = require("path");
module.exports = {
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"),
    },
  },
  //扩展更多 loader
  module: {
    rules: [{ test: /.handlebars$/, loader: "handlebars-loader" }],
  },
  //扩展更多plugins
  plugins: [new I18nPlugin(languageConfig, optionsObj)],
};

该对象将通过 webpack-merge 合并到最终的 webpack 配置中。

一些 webpack 选项是根据工程实践设置的，并在配置中的多个位置使用，以确保一切都能协同工作。 在扩展更多配置之前，建议参考cjet项目中已有的配置。

PostCSS配置

cjet内部使用PostCSS，并预设了以下配置。

{
  plugins: {
    "postcss-flexbugs-fixes": {},
    "postcss-preset-env": {
      autoprefixer: {
        flexbox: "no-2009"
      },
      stage: 3
    },
    "postcss-normalize": {}
  }
}

cjet支持PostCSS的灵活配置，只需在项目根目录下新建一个postcss.config.js，并导入一个配置对象，修改后的对象就会合并到最终的PostCSS配置中。 例如扩展viewport(vw,vh)适配方案：

//postcss.config.js
module.exports = {
  plugins: {
    "postcss-aspect-ratio-mini": {},
    // to edit target browsers: use "browserslist" field in package.json
    "postcss-write-svg": {
      uft8: false,
    },
    "postcss-px-to-viewport": {
      viewportWidth: 750, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
      viewportHeight: 1334, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
      unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
      viewportUnit: "vw", // 指定需要转换成的视窗单位，建议使用vw
      selectorBlackList: [".ignore", ".hairlines"], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
      minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
      mediaQuery: false, // 允许在媒体查询中转换`px`
    },
    "postcss-viewport-units": {},
    cssnano: {
      preset: "advanced",
      autoprefixer: false, // 和cssnext同样具有autoprefixer，保留一个
      "postcss-zindex": false,
    },
  },
};

cjet 默认启用 autoprefixer。 您可以根据规范调整package.json中的browserslist来自定义目标支持的浏览器。

例如：

.App {
  display: flex;
  flex-direction: row;
  align-items: center;
}

将被编译为：

.App {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

默认情况下禁用 CSS 网格布局前缀，但不会删除自动前缀。 如果您想选择使用 CSS Grid 前缀，请首先。 要启用 CSS 网格前缀，请将 /* autoprefixer grid: on */ 添加到 CSS 文件的底部。

巴别塔配置

cjet 支持在项目根目录下新建 babel.config.js 来扩展更多 babel 配置。

//babel.config.js
module.exports = {
  plugins: [
    ["import", { libraryName: "antd-mobile", style: true }], // `style: true` 会加载 less 文件
  ],
};

ESlint配置

cjet 支持在项目根目录下的 cjet.config.js 文件中配置 ESlint 项目配置项。 默认使用eslint-config-react-app配置规则，其他规则可以灵活配置和扩展。 支持。

//cjet.config.js
module.exports = {
  /**
   * eslint 配置
   */
  eslint: {
    available: true, //开启eslint
    cache: true, //启用配置缓存，如果新配置不起作用请先设置为false
    useEslintrc: false, //使用项目中eslintrc配置
    extends: [], //默认使用的eslint规则
  },
};

使用打字稿

TypeScript 是 JavaScript 的类型化超集，可编译为纯 JavaScript。

首先安装依赖项：

yarn add typescript @types/node @types/react @types/react-dom
# 或者
npm install typescript @types/node @types/react @types/react-dom

接下来，无需任何配置，只需将任意文件重命名为 TypeScript 文件（例如，将 src/index.js 重命名为 src/index.tsx）并重新启动开发服务器，cjet 会自动生成一个 tsconfig.json 文件，可以将其编辑为生成 TypeScript 配置。

//tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": ["src"]
}

根据业界开发React项目的最佳实践，部分配置会被cjet默认的内部配置覆盖。 如果不想覆盖tsconfig.json中的个别项，可以关闭项目根目录cjet.config.js中的配置。

//cjet.config.js
module.exports = {
  /**
   * typescript配置
   */
  tsconfig: {
    rewrite: true, //是否使用框架内部最佳实践覆盖项目中的tsconfig.json
  },
};

注意：默认配置不支持常量枚举和命名空间。

使用环境变量

使用 cjet 构建的项目可以使用在环境中声明的变量，就像它们是在 JS 文件中本地声明的变量一样。

环境变量是在构建过程中嵌入的。 由于 cjet 生成静态 HTML/CSS/JS 包，因此很难在运行时读取它们。 要在运行时读取它们，需要将 HTML 加载到服务器上的视频内存中，并在运行时替换占位符。

注意：自定义环境变量必须以 REACT_APP 开头创建。 除 NODE_ENV 之外的任何其他变量都将被忽略，以防止意外暴露可能具有相同名称的计算机上的公钥。更改任何环境变量都需要重新启动正在运行的开发服务器

此类环境变量将在 process.env 上为您定义。 例如，名为 REACT_APP_ENVDEMO_CODE 的环境变量将在 JS 中公开为 process.env.REACT_APP_ENVDEMO_CODE 。

还有一个特殊的外部环境变量，称为 NODE_ENV。 可以从process.env.NODE_ENV读取。 当您运行yarn dev 时，它始终等于开发；当您运行yarn build 来生成生产包时，它始终等于生产。 无法自动覆盖 NODE_ENV。 这可以防止开发人员意外地将缓慢的开发部署到生产中。

在 HTML 中引用环境变量

cjet支持访问index.html中以REACT_APP开头的环境变量：

%REACT_APP_WEBSITE_NAME%">

<title>%REACT_APP_WEBSITE_NAME%</title>

请注意：

在 shell 中使用临时环境变量

# Windows (cmd.exe) 注意：变量赋值需要用引号包裹，以避免尾随空格。）
set "REACT_APP_ENVDEMO_CODE=abcdef" && yarn dev
# Windows (Powershell)
($env:REACT_APP_ENVDEMO_CODE = "abcdef") -and (yarn dev)
# Linux, macOS (Bash)
REACT_APP_ENVDEMO_CODE=abcdef yarn dev

在 .env 中使用环境变量

使用cjet构建的项目支持使用.env文件来设置和管理项目中的环境变量，并在项目根目录中创建新的.env文件：

REACT_APP_ENVDEMO_CODE=abcdef

左侧的文件比左侧的文件具有更高的优先级：

cjet预设环境变量

您可以通过在 shell 中设置环境变量或使用 .env 来调整各种开发和生产设置。

变量开发生产使用

浏览器

支持

不支持

默认情况下，cjet会打开默认的系统浏览器，支持macOS上的Chrome。 指定浏览器来覆盖此行为，或将其设置为 none 以完全禁用它。 如果需要自定义启动浏览器的形式，可以指定节点脚本。 传递给yarn dev 的任何参数也将传递给此脚本，并且所提供的应用程序的url 将是最后一个参数。 您的脚本的文件名必须具有 .js 扩展名。

主持人

支持

不支持

默认情况下，开发 Web 服务器绑定到 localhost。 您可以使用此变量来指定其他主机。

港口

支持

不支持

默认情况下，开发 Web 服务器将尝试侦听端口 8080 或提示您尝试下一个可用端口。 您可以使用此变量来指定其他端口。