8分钟阅读

维护控制:网克的指南,并反应,Pt。 2

Michael是一家专业从事反应和类型的前端开发的高级全堆叠开发商。

这一反应网客教程的第一部分,我们讨论了如何配置加载器并执行优化。现在,我们将进入更高级的技术与特定的React / WebPack Config用例相关。

类型签字并与webpack作出反应:输入babel

有几种方法可以使用您的类型 反应 project. While ts-loader is a good option, I’d like to focus on how to transpile TypeScript using @babel/preset-typescript 因为许多库正在发布Babel插件以执行编译时间优化。除了处理打字银河游戏官方首页外,它还允许我们使用各种库提供的Babel插件,例如 风格组件 或者 反应 - Intl..

我们需要做的第一件事就是安装打字标注和Babel依赖项:

npm install -D typescript @babel/preset-typescript @types/react @types/react-dom

We’ll then generate a TypeScript configuration file using the command-line program tsc:

./node_modules/.bin/tsc -init --lib dom --jsx react --isolatedModules

The command above will generate a tsconfig.json suitable for writing code for a browser environment. The --isolatedModules option enforces some constraints which make sure that the code you write will be compatible with @babel/plugin-transform-typescript。当您在禁止Babel无法转换的方式编写代码时,此选项对于您的IDE表示警告您是有用的。

Next, we are going to update babel.config.js by introducing a new preset:

@@ -6,7 +6,8 @@ module.exports = {
         modules: false
       }
     ],
-    "@babel/preset-react"
+    "@babel/preset-react",
+    "@babel/preset-typescript"
   ],
   plugins: [
     "@babel/plugin-transform-runtime",

And enable the .ts file extension in webpack.config.js:

@@ -11,7 +11,7 @@ module.exports = function(_env, argv) {

   return {
     devtool: isDevelopment && "cheap-module-source-map",
-    entry: "./src/index.js",
+    entry: "./src/index.tsx",
     output: {
       path: path.resolve(__dirname, "dist"),
       filename: "assets/js/[name].[contenthash:8].js",
@@ -20,7 +20,7 @@ module.exports = function(_env, argv) {
     module: {
       rules: [
         {
-          test: /\.jsx?$/,
+          test: /\.(js|jsx|ts|tsx)$/,
           exclude: /node_modules/,
           use: {
             loader: "babel-loader",
@@ -61,6 +61,9 @@ module.exports = function(_env, argv) {
         }
       ]
     },
+    resolve: {
+      extensions: [".js.", ".js.x", ".ts", ".tsx"]
+    },
     plugins: [
       isProduction &&
         new MiniCssExtractPlugin({

上面的配置足以能够转换我们的代码,但它实际上并没有验证它。我们需要在使用单独的并行流程中执行类型检查 fork-ts-checker-webpack-plugin.

首先,我们需要安装它:

npm install -D fork-ts-checker-webpack-plugin

Then, we’ll add it to the plugins section in webpack.config.js:

@@ -4,6 +4,7 @@ const HtmlWebpackPlugin = require("html-webpack-plugin");
 const webpack = require("webpack");
 const TerserWebpackPlugin = require("terser-webpack-plugin");
 const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
+const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");

 module.exports = function(_env, argv) {
   const isProduction = argv.mode === "production";
@@ -78,6 +79,9 @@ module.exports = function(_env, argv) {
         "process.env.NODE_ENV": JSON.stringify(
           isProduction ? "production" : "development"
         )
+      }),
+      new ForkTsCheckerWebpackPlugin({
+        async: false
       })
     ].filter(Boolean),
     optimization: {

Specifying async: false will prevent Webpack from emitting invalid code and show compilation errors in an overlay when running a development server.

注意:您也可能有兴趣 Babel Macros.,这是牵引的牵引力。

CSS.,通过网克增强

在 the previous article, we covered basic styling using css-loader. There are several ways in which we can improve on this configuration.

建议的配置将利用 CSS.模块, Sass., 和 postcs. 技术。虽然它们在某种程度上互相补充,但您不需要同时使用所有这些。最终设置将启用所有上述插件,如果您肯定的是,我们会将其留给您留下一些东西,如果您肯定是“你没有必要。”

CSS.模块

CSS.模块 通过为每个CSS类生成随机的,唯一名称来解决CSS银河游戏官方首页中全局范围的问题。从消耗CSS模块的JavaScript银河游戏官方首页的角度来看,原始类名和随机分组之间的关联由由加载器导出的对象表示。它允许您在CSS银河游戏官方首页中指定的课程中发现并使用意外碰撞几乎不可能。

CSS.模块 support is already included in css-loader. Now we are going to need to add a new rule to make it explicit as to when CSS Modules are in use:

@@ -33,11 +33,25 @@ module.exports = function(_env, argv) {
         },
         {
           test: /\.css$/,
           use: [
             isProduction ? MiniCssExtractPlugin.loader : "style-loader",
             "css-loader"
           ]
         },
+        {
+          test: /\.module.css$/,
+          use: [
+            isProduction ? MiniCssExtractPlugin.loader : "style-loader",
+            {
+              loader: "css-loader",
+              options: {
+                modules: true
+              }
+            }
+          ]
+        },
         {
           test: /\.(png|jpg|gif)$/i,
           use: {

With that, any file ending in .module.css will be processed with CSS Modules enabled.

postcs.

PostCs是一个可扩展的CSS处理框架,它可以使用巨大的插件库,可用于扩展CSS语法,执行优化,或为旧浏览器提供回退。

首先,我们将安装必要的依赖项:

npm install -D postcss-loader postcss-import postcss-preset-env

并更新我们的CSS配置:

@@ -47,9 +47,11 @@ module.exports = function(_env, argv) {
             {
               loader: "css-loader",
               options: {
-                modules: true
+                modules: true,
+                importLoaders: 1
               }
-            }
+            },
+            "postcss-loader"
           ]
         },
         {

我们将使用以下插件配置POSTCS:

  • postcss-import: Enables PostCSS to process @import statements
  • postcss-preset-env:应用Polyfills在大多数浏览器中支持现代CSS功能

Create a file called postcss.config.js 和 populate it with the following:

module.exports = {
  plugins: {
    "postcss-import": {},
    "postcss-preset-env": {}
  }
};

你可以退房 postcss插件目录 对于您可能会发现有用并将其添加到配置中的其他扩展。

Sass. / SCS

Sass. 是另一个受欢迎的CSS处理框架。与Postcss不同,Sass附带“包括电池”。开箱即用,SASS为嵌套规则,mixins和重写规则提供支持,以便向后兼容。虽然PostCs旨在保留标准CSS语法,但SASS语法可能从CSS规范发出。尽管如此,Sass是一种如此无处不在的解决方案,用于为创作CSS使用它可能只是一个更容易的选项 - 但是一个 取决于您的要求.

首先,我们将安装必要的依赖项:

npm install -D sass-loader node-sass resolve-url-loader

然后,向我们的WebPack配置添加新装载机:

@@ -38,6 +38,25 @@ module.exports = function(_env, argv) {
             "css-loader"
           ]
         },
+        {
+          test: /\.s[ac]ss$/,
+          use: [
+            isProduction ? MiniCssExtractPlugin.loader : "style-loader",
+            {
+              loader: "css-loader",
+              options: {
+                importLoaders: 2
+              }
+            },
+            "resolve-url-loader",
+            {
+              loader: "sass-loader",
+              options: {
+                sourceMap: true
+              }
+            }
+          ]
+        },
         {
           test: /\.(png|jpg|gif)$/i,
           use: {

我们抢先地解决了上述片段的几个问题:

  1. We introduced resolve-url-loader after sass-loader to make relative imports work from @imported Sass files.

  2. We specified importLoaders option for css-loader to process @import-ed files using the loaders that follow it.

通过上述配置,除了我们之前描述的PostCs和CSS模块之外,我们还可以使用SASS / SCS开始创作我们的样式。虽然可以同时启用所有这些选项,但您不必在同一项目内部使用它们,因此您可以选择最适合您要求的一个工具。

Web工作者

Web工作者 是现代网络的强大概念。它让您卸下远离主线程的昂贵计算。 Web工作人员应谨慎使用,并保留用于在事件循环内通过智能调度无法进行优化的事项。使用Web工人是优化长,同步操作的好候选者。

WebPack使Web工作者易于使用 worker-loader,将工作者银河游戏官方首页捆绑到输出目录中,并为消费者银河游戏官方首页提供一个工作室。

First, we need to install worker-loader:

npm install -D worker-loader

然后将其添加到我们的配置银河游戏官方首页:

@@ -31,6 +31,10 @@ module.exports = function(_env, argv) {
             }
           }
         },
+        {
+          test: /\.worker\.js$/,
+          loader: "worker-loader"
+        },
         {
           test: /\.css$/,
           use: [

Now, all you need to do to start using web workers is to instantiate a class imported from a file ending in .worker.js that implements the ordinary 工人API..

服务工人

服务工作者使高级优化技术和改进用户体验。当用户丢失其网络连接时,它们会允许您的应用程序脱机。它们也让您的应用程序瞬间瞬间加载更新后。

WebPack可以轻松配置应用程序的服务工作者使用 Workbox-webpack-plugin 模块。首先,我们需要安装它:

npm install -D Workbox-webpack-plugin

Then, we’ll add the plugin to the plugins section of our Webpack configuration:

@@ -4,6 +4,7 @@ const HtmlWebpackPlugin = require("html-webpack-plugin");
 const webpack = require("webpack");
 const TerserWebpackPlugin = require("terser-webpack-plugin");
 const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
+const WorkboxPlugin = require("Workbox-webpack-plugin");

 module.exports = function(_env, argv) {
   const isProduction = argv.mode === "production";
@@ -75,6 +76,11 @@ module.exports = function(_env, argv) {
         "process.env.NODE_ENV": JSON.stringify(
           isProduction ? "production" : "development"
         )
+      }),
+      new WorkboxPlugin.GenerateSW({
+        swDest: "service-worker.js",
+        clientsClaim: true,
+        skipWaiting: true
       })
     ].filter(Boolean),
     optimization: {

上面的配置使用以下选项:

  • swDest 指定生成的工作银河游戏官方首页的输出银河游戏官方首页名。
  • clientsClaim 指示服务工作者在注册后立即控制页面,并开始提供缓存的资源而不是等待下一页重新加载。
  • skipWaiting 对服务工作者进行更新立即生效,而不是等待要销毁的所有活动实例。

有一个好原因,为什么两个后一种选择不是默认的。同时启用时,存在潜力 在时间敏感情况下发生故障,所以由您决定是否在配置中保持这些选项。

最后,我们需要在用户打开我们的应用程序时注册服务工作者:

@@ -2,3 +2,9 @@ import React from "react";
 import ReactDOM from "react-dom";

 ReactDOM.render(<h3>React App</h3>, document.getElementById("root"));
+
+if ("serviceWorker" in navigator) {
+  window.addEventListener("load", () => {
+    navigator.serviceWorker.register("/service-worker.js");
+  });
+}

服务工作人员能够为我们的应用程序添加离线功能。如果您需要更大程度的服务工作者行为,那么您可能会使用 在 jectManifest 插件代替。通过编写自己的服务工作者银河游戏官方首页,您还可以为API请求启用缓存,并使用服务工作人员(如推送通知)启用的其他功能。您可以了解有关Workbox的功能的更多信息 其官方银河游戏官方首页的高级食谱部分.

高级React WebPack Config:为您的项目提供优势

我们的WebPack教程系列的第二部分应该武装您的必要知识,以扩展您的WebPack配置过去最一般的反应用例。我希望您发现此信息很有用,并且您可以自信地扩展您的个性化配置以实现特定于项目的目标。

一如既往,你可以找到 GitHub上的完整配置银河游戏官方首页 并参考 WebPack银河游戏官方首页它的插件部分 查找适用于您的目标的更多食谱。谢谢你的阅读!

理解基础知识

Babel-Loader包做了什么?

Babel-Loader可以使用Babel及其各种插件来处理导入的JavaScript银河游戏官方首页。

什么是webpack装载机?

在WebPack中,加载器指定处理导入银河游戏官方首页的规则。

谁创建了网客?

WebPack项目由2012年3月的Tobias Koppers创立,并继续由许多网上网克维护者和贡献者发展到此日期。

WebPack Config是什么?

WebPack Config是一个JavaScript对象,它指定处理输入银河游戏官方首页并创建输出捆绑的规则。

为什么使用webpack?

WebPack用于将现代JavaScript代码转换为可以在浏览器内执行的捆绑包。