尽量简单地部分引入React

1 年 ago
清, 扬
2 minutes

在所谓的传统环境中，SPA前端并没有像Laravel或RubyOnRails这样的MPA应用那样充满活力。请注意，这并不是说MPA不好。考虑到最近的SSR等趋势，我认为MPA也有其优点。

在这种环境下，很多时候会使用jQuery等工具来编写代码，而不是React。但是最近观察流行趋势时，我经常会有想要写声明式UI和使用React的感觉。

因此，本次将介绍两种在传统环境中使用React的方法。此外，由于更改生产环境非常困难且影响范围广，所以我们将介绍尽可能简单的引入方法。

使用CDN

可以利用CDN发布的React进行开发。
虽然这种方法在官方文档中有介绍，也很容易上手，但也有很多限制。

您可以下载文件并将其安装在本公司服务器上进行使用，而不是使用CDN服务。

// 開発環境
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

// 本番環境
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>

代码示例

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

<div id="root"></div>

const root = document.querySelector("#root");
const App = ()=>{
  return (<div>Reactの出力</div>);
};
ReactDOM.render(<App />, root);

好处

只需在现有项目中添加script标签，就能轻松引入React，这一点非常具有魅力。

缺点 (quē

这个库很难用
因为我需要加载和使用CDN上公开的库，所以非常不方便和难以使用（很抱歉如果有其他方法）
虽然诸如cdnjs之类的平台上有许多库可以使用，但并不是所有库都能在上面找到，所以经常无法使用。

写不出复杂处理的代码
因为它不是以SPA应用程序的形式构建，所以处理路由等操作很困难
无法共享页面之间的状态（虽然可以通过cookie实现，但在这里指的是仅限于React世界）

我不会写TypeScript
我还是想用TypeScript写…

读取本地构建的内容

使用此方法，为本地开发环境准备Node.js环境，并使用Webpack进行构建。通过在脚本标签中引入输出的JS文件，可以使用React。这样可以解决之前的问题，例如难以使用库或无法使用TypeScript等。

在我引入时，除了现有的容器环境外，我还创建了一个用于React开发的容器，使用Node.js。由于只是开发环境的更改，所以能够进行修正而不影响生产环境。

步驟

建立Docker环境

我使用以下的形式创建了Dockerfile，并在docker-compose.yml中进行了加载。
如果在现有项目中已经确定了保存JS等文件的位置，请挂载该目录。
（在初次启动时可能会出现错误，因为没有webpack。在这种情况下，请先在本地安装，然后再启动或者先注释掉CMD再启动，在安装后重新启动）

FROM node:17.4.0-bullseye-slim

WORKDIR /src

CMD ["npx", "webpack", "--watch"']

2. 写React

请参照CDN示例，使用React进行编写。

进行设定

首先需要安装库。这次我们安装了以下库。

{
  "name": "react-sample",
  "version": "1.0.0",
  "devDependencies": {
    "@babel/core": "^7.19.6",
    "@babel/preset-env": "^7.19.4",
    "@babel/preset-react": "^7.18.6",
    "@babel/register": "^7.18.9",
    "@types/react": "^18.0.23",
    "@types/react-dom": "^18.0.7",
    "babel-loader": "^8.2.5",
    "html-webpack-plugin": "^5.5.0",
    "ts-loader": "^9.4.1",
    "typescript": "^4.8.4",
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.11.1"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

此外，如果要使用TypeScript进行开发，我们需要先创建一个tsconfig.json文件。

{
  "compilerOptions": {
    "allowJs": true,
    "alwaysStrict": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "lib": ["dom", "es2017"],
    "module": "esnext",
    "moduleResolution": "node",
    "noEmit": true,
    "noFallthroughCasesInSwitch": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "strict": true,
    "target": "esnext",
    "allowSyntheticDefaultImports": true,
    "baseUrl": "./"
  }
}

最後，我们将进行Webpack的配置。以下是config的示例。如果要使用，请适当更改文件路径。

以下是三个要点。

    • TypeScriptを使えるようにする

 

    • 変更の監視は特定のディレクトリだけにする

watchFilesで監視するファイルを指定します
必要のないファイルまで監視してしまうと重くなったり、意図しないビルドが発生してしまう可能性があるので（既存プロジェクトの場合は特に）、最低限のファイルを監視しています。

複数のファイルを生成する

SPAではないので、ページごとにビルドする必要があります
ここではentryとoutputの部分でそれを実現しています
ファイルを増やす場合はentryの部分に追加してください

require('@babel/register');

const path = require('path');
const TerserPlugin = require('terser-webpack-plugin');


const src  = path.resolve(__dirname, 'data/static/js/react');
const dist = path.resolve(__dirname, 'data/static/js/react/dist');

module.exports = {
  mode: 'development',
  entry: {
    sample: src +'/frontend/sample/index.jsx',
  },
  output: {
    path: dist,
    filename: '[name].bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.jsx$/,
        exclude: /node_modules/,
        use: [
            {
              loader: "babel-loader",
              options: {
                presets: [
                  "@babel/preset-env",
                  "@babel/react"
                ]
              }
            }
          ]        
      },
      {
        test: /\.tsx?$/,
        exclude: /node_modules/,
        use: [
            {
                loader: "babel-loader",
                options: {
                    presets: [
                        "@babel/preset-env",
                        "@babel/react"
                    ]
                }
            },
            { loader: "ts-loader" }
        ],
    }
    ]
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx']
  },
  optimization: {
    minimizer: [new TerserPlugin({
      extractComments: false,
    })],
  },
  plugins: [],
  performance: {
    maxEntrypointSize: 500000,
    maxAssetSize: 500000,
  },
  watchOptions: {
    ignored: ['**/node_modules'],
  },
  devServer: {
    watchFiles: ["data/static/js/react/**"],
  },
}

编译并确认显示

当启动Docker时，Webpack将以监控模式运行，因此在启动和修改时都会进行构建。然后，构建后的JS文件将输出到指定为Webpack output的目录中。

我们在现有的网站上加载这个JS文件并进行页面显示。由于没有热重载功能，所以需要手动重新加载。

优点

可以解决CDN方法的缺点
之前的缺点，现在可以方便地使用库和TypeScript。

缺点

有时候JS文件的大小会增大。根据规模不同，构建后的JS文件可能会变得很大，并导致性能下降。根据情况，建议仅从CDN加载React文件。

总结

在这篇投稿中，我介绍了两种在传统环境中常见的使用React作为前端网站的方法。但是一旦开始写React，就会不满足于仅仅使用React，接下来想要使用Next.js进行服务器端渲染…等等。

由于从一开始就完全替换是相当困难的，因此我希望借此机会来彻底安装前端服务器，并将其作为迈向现代化环境的起点！

文献引用

 

✖
广告
将在 10 秒后关闭
bannerAds