検索
ホームページウェブフロントエンドフロントエンドQ&Avwebpack パッケージに使用できるファイルは何ですか?

vwebpack パッケージに使用できるファイルは何ですか?

青灯夜游
青灯夜游
Dec 20, 2022 pm 07:44 PM
vuewebpack

vue では、webpack は js、css、ピクチャ、json、その他のファイルをブラウザで使用できる適切な形式にパッケージ化できます。webpack では、js、css、ピクチャ、json、その他のファイル タイプをパッケージ化できます。モジュール。 Webpack のさまざまなモジュール リソースは、パッケージ化して 1 つ以上のパッケージにマージでき、パッケージ化プロセス中に、画像の圧縮、scss から css への変換、ES6 構文から ES5 への変換などのリソースを処理できます。 HTMLで認識されるファイルタイプ。

vwebpack パッケージに使用できるファイルは何ですか?

#このチュートリアルの動作環境: Windows7 システム、vue3 バージョン、DELL G3 コンピューター。

1. webpack とは

webpack 公式 Web サイトでの定義は次のとおりです。

本質的に、webpack は最新の JavaScript アプリケーションです。モジュールバンドラー。 Webpack はアプリケーションを処理するときに、アプリケーションが必要とするすべてのモジュールを含む依存関係グラフを再帰的に構築し、これらすべてのモジュールを 1 つ以上のバンドルにパッケージ化します。

vwebpack パッケージに使用できるファイルは何ですか?

#上に示すように: 中央の青いブロックは webpack で、左側のさまざまなファイルを HTML で解析できるファイルにパッケージ化します。

概要:

  • #webpack は静的パッケージング モジュールです。

  • ここには 2 つの概念が関係しています:

    パッケージング と モジュール

1. モジュールとは何ですか?

モジュール化には、commonJs 仕様、AMD 仕様、CMD 仕様、ES6 仕様など、多くの仕様があります。

ES6 より前は、モジュール開発を使用したい場合は、他のツールを使用する必要があり、開発が完了した後、さまざまな依存関係に対処し、それらを統合してパッケージ化する必要があります。

Webpack を使用すると、モジュール開発を実行できます。これはプラットフォームを提供し、各モジュール間の依存関係を処理するのに役立ちます。

Webpack は、最終的に、js、css、画像、json、その他のファイルをブラウザーで使用するのに適した形式にパッケージ化するのに役立ちます。
Webpack 内、上記のファイル タイプはすべてモジュールとして使用できます。

2. パッケージ化とは何ですか?

それは、 Webpack でのさまざまなモジュール リソースのパッケージ化 1 つまたは複数のパッケージにマージし、パッケージ化プロセス中に、画像の圧縮、scss から css への変換、ES6 構文から ES5 への変換、および html で認識できるその他のファイル タイプへの変換などのリソースを処理できます。 .

2. webpack パッケージング ツールのインストール

webpack パッケージング ツールは、nodejs に依存しています。nodejs 環境はさまざまなパッケージに依存しており、これらのパッケージは管理されていますnpm の使用。npm とは何ですか? npm は、node の下でさまざまなパッケージを管理するために使用されます。

webpack をインストールする方法を見てみましょう?

最初のステップ: nodejs をインストールします

公式 Web サイトから nodejs をダウンロードします: https://nodejs.org/zh-cn/ インストール後、nodejs のバージョンを確認できます 

node -v
現在のバージョンは v12 .16.2

nodejs がデフォルトでインストールされると、npm が自動的にインストールされるため、npm を個別にインストールする必要はありません

ステップ 2: webpack をインストールします

現在使用している vue のバージョンが 2 で、vue2 が依存する webpack のバージョンが 3.6.0## であるため、使用する webpack のバージョンは 3.6.0 です。

#最初にマシンがインストールされているかどうかを確認します。webpack の場合は、コマンドを使用してクエリを実行します。

 webpack --version

インストールされていない場合は、グローバル webpack

npm install webpack@3.6.0 -g

-g:表示的是global  全局的意思
# をインストールします。 ##

webpack需要全局安装, 也需要局部安装. 

我们在终端或者IDE的terminal中使用webpack都是使用的全局的webpack,当我们在项目下使用package.json scripts webpacks, 这时候使用的是局部安装的.

那什么是全局webpack ,什么是本地webpack呢?

我们通常都会安装两个webpack, 一个是全局的一个是本地的.
全局的指的是电脑上安装的webpack包, 所有项目都可以使用
本地webpack是指当前项目的webpack包. 通常全局webpack版本会比较高, 而我的项目是老项目, 使用的是老版本的
webpack打包的, 这时如果使用全局的webpack打包就会报错, 所以, 需要安装一个和项目匹配的本地的webpack包

在这里, 我们先值安装全局的, 后面使用到本地的了, 再来安装本地的webpack.

三. webpack的基本使用

webpack下通常包含两个文件夹， 一个是src， 一个是dist

  • src下都会有一个main.js, 作为主js文件.
  • dist存放打包后的文件

vwebpack パッケージに使用できるファイルは何ですか?

在webpack中,我们会使用两种类型的模板来定义: 分别是commonJs语法, 和ES6语法.

  • 在main.js引用mathUtil.js, 使用commonjs语法
  • 在main.js引用dataUtil.js, 使用ES6语法

 下面, 我们创建一个mathUtil.js 和 dataUtil.js两个js文件, 分别使用commonJs语法和ES6语法来创建.

  • - 在main.js引用mathUtil.js, 使用commonJs语法

  • - 在main.js引用dataUtil.js, 使用ES6语法

项目结构如下:

vwebpack パッケージに使用できるファイルは何ですか?

1)  使用commonJs语法

第一步: 在mathUtil.js中export, 使用commonJs模块的写法 : module.exports ={add, sub}

function add(num1, num2) {
    return num1 + num2
}


function sub(num1, num2) {
    return num1 - num2
}

// 使用commonJs导出模块
module.exports={add, sub}

这里使用的是commonJs的语法导出方法

第二步: 在main.js中引用mathUtil.js中导出的变量 const {add, sub} = require("文件名")

const{add, sub} = require("./mathUtil.js")

console.log(add(10, 20))
console.log(sub(20, 10))

第三步: 使用webpack语句打包 : webpack ./src/main.js ./dist/bundle.js

首先进入到当前项目的根目录下, 然后输入命令

webpack ./src/main.js ./dist/bundle.js

意思是: 将src目录下的main.js进行打包, 打包好的文件放在dist目录下, 并命名为bundle.js

webpack是自动打包工具, 所以, 我们只需要打包main.js, 他会自动检查main.js是否引用了其他文件. 如果有自动将其打包.

vwebpack パッケージに使用できるファイルは何ですか?

打包以后, 会生成一个bundle.js.  

第四步: 在index.html中引入bundle.js文件

 nbsp;html>


    <meta>
    <title>Title</title>
    <script></script>

引入以后, 就是普通的html代码了, 我们可以向访问其他html一样,访问这个页面.

2) 使用ES6语法

第一步: 在dateUtil.js中导出, 使用ES6写法: export {var1, var2}

function priceUnit(price) {
    return "$" + price.toFixed(2)
}

export {priceUnit}

第二步: 在main.js中引用dateUtil.js中导出的变量 import {var1, var2} from "文件地址"

import {priceUnit} from "./dataUtil"console.log(priceUnit(25))

第三步: 使用webpack语句打包 :  webpack ./src/main.js ./dist/bundle.js

webpack ./src/main.js ./dist/bundle.js

第四步: 在index中引用bundle.js文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./dist/bundle.js" ></script>
</head>
<body>

</body>
</html>

四. webpack配置文件

1. 如何使用webpack命令直接打包

刚刚我们打包的时候, 使用的是

webpack ./src/main.js ./dist/bundle.js

那么, 如果在项目下, 可不可以直接使用webpack, 而不用每次都指定文件呢? 这样可以方便很多
当然是可以的, 我们需要在项目根目录下创建一个文件: webpack.config.js 这个名字是固定的

这个js就是要告诉我们哪里是webpack的入口, 哪个是webpack的出口

webpack.config.jsmodule.export={
    entry: &#39;./src/main.js&#39;,
    output: {
        path: &#39;/dist&#39;,
        filename: &#39;/bundle.js&#39;
    }
}
  • entry用来指定入口, 指定一个路径
  • output用来指定出口. 需要注意的是: 出口是一个对象, 由两部分组成: path和filename

然后我们在终端输入webpack打包. 打包会报错, 报错信息提示很明确: 

The provide value "./dist" is not an absolute path!

意思是说path应该是已经绝对路径. 也就是dist的绝对路径

思考: 我们能直接写一个绝对路径么? 比如: /Users/workspace/vue-study/webpack的配置/src/main.js 这样可以么?
这样肯定不太好, 因为我一旦将文件文在其他目录下, 这个地址就变了.

webpack可以帮助我们获取当前项目的绝对路径
我们const path = require("path")来获取相对目录. 可是当前目录下没有path的包,  path是node下东西, 需要通过npm init来初始化,

2. 初始化项目npm init

初始化命令

npm init

初始化完成以后, 就会创建一个叫package.json的文件

通常, 我们需要使用node的东西, 或者单独依赖node环境的话, 都会执行npm init, 生成package.json

3. 安装模块

如果package.json里面依赖其他模块, 需要使用npm install的安装一下, 然后就会在当前文件夹中安装一些东西

npm install
  • const path = require("path")这里的path就是node给我们生成的, 我们可以直接使用.

然后我们的output中path就可以这么写: 

path.resovle(__dirname, "dist")
  • _dirname是一个全局变量, resolve是一个函数, 可以将两个部分的内容拼在一块, 这样生成以后就是一个绝对路径

4. 使用npm run来启动项目

下面来看一下package.json

{
  "name": "meet",
  "version": "1.0.0",
  "description": "刚刚我们打包的时候, 使用的是webpack ./src/main.js ./dist/bundle.js 那么, 如果在项目下, 可不可以直接使用webpack, 而不用每次都指定文件呢? 可以的, 我们需要在项目根目录下创建一个文件, webpack.config.js 这个名字是固定的 这个js就是要告诉我们哪个是webpac的入口, 哪个是webpack的出口 通过module.export={     entry: &#39;./src/main.js&#39;,     output: {         path: &#39;/dist&#39;,         filename: &#39;/bundle.js&#39;     } } 来告诉我们入口和出口在哪里. entry用来指定入口, 指定一个路径 output用来指定出口. 出口是一个对象",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

通常我们启动项的时候会使用npm run serve启动项目, npm run build构建项目. 当执行这个命令的时候, 就会去package.json中的script标签中找build命令和serve命令.

执行npm run build让其执行webpack打包就可以在script中增加"build":"webpack"

{
  "name": "meet",
  "version": "1.0.0",
  "description": "刚刚我们打包的时候, 使用的是webpack ./src/main.js ./dist/bundle.js 那么, 如果在项目下, 可不可以直接使用webpack, 而不用每次都指定文件呢? 可以的, 我们需要在项目根目录下创建一个文件, webpack.config.js 这个名字是固定的 这个js就是要告诉我们哪个是webpac的入口, 哪个是webpack的出口 通过module.export={     entry: &#39;./src/main.js&#39;,     output: {         path: &#39;/dist&#39;,         filename: &#39;/bundle.js&#39;     } } 来告诉我们入口和出口在哪里. entry用来指定入口, 指定一个路径 output用来指定出口. 出口是一个对象",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC"
}

然后就可以使用npm run webpack来打包了. 但是这里打包是全局打包. 因为我们之前只安装了一个全局的webpack.
但如果项目使用的版本和全局的不一样, 怎么办呢? 我们还可以使用局部的wenpack打包.

5. 全局webpack和局部webpack有什么区别呢?

我们通常都会安装两个webpack,

  • 一个是全局的
  • 一个是本地的.

全局的指的是电脑上安装的webpack包, 所有项目都可以使用
本地webpack是指当前项目的webpack包.

通常全局webpack版本会比较高, 而我的项目是老项目, 使用的是老版本的
webpack打包的, 这时如果使用全局的webpack打包就会报错, 所以, 需要安装一个和项目匹配的本地的webpack包

6. 安装本地webpack命令

npm install webpack@3.6.0 --save-dev
  • --save-dev: 这个参数的含义表示开发时依赖.

这里有两个概念:

  • 1. 开发时依赖
  • 2. 运行时依赖

对于打包来说, 我们只有在开发环境才会打包, 开发好以后要上线了会将其构建成html代码, 放到服务器上运行,
放到服务器以后, 就不需要打包了, 所以, 打包只需要在开发时使用, 是一个开发时依赖

本地webpack安装好以后, 会在package.json中看到devDependencies属性, 这就是开发时依赖

本地webpack安装好以后, 使用npm run build进行打包. 那是使用的全局webpack打包的还是本地webpack打包的呢?
本地安装好webpack以后会多出一个文件夹node_modules, 这里是默认在本地装的包, 其中有一个是webpack, 使用这里面的webpack
就表示使用的局部webpack打包. 而当我们在终端, 或者ide的terminal中执行webpack命令都是全局的


如果想要使用局部webpack打包, 可以使用npm run build. 这时就是去package.json的script脚本中找build命令了.

package.json中脚本命令执行的顺序:

  • 首先, 在本地的路径中找命令
  • 然后, 本地没有, 再去全局中找命令

在这里首先回去本地找有没有这个命令, 如果没有就去全局找

五.使用webpack打包css文件

webpack主要是用来打包的, 我们之前都是打包了js代码文件, 那如果还有css, 图片, 或者一些高级转换,如将ES6转换成ES5,将scss, less转成css, 将.vue文件转换成js文件怎么办呢?

webpack单独是不能完成转换的,需要借助loader.

1. 什么是绍loader?

webpack 可以使用 loader 来预处理文件。这允许你打包除 JavaScript 之外的任何静态资源。

loader是webpack中一个非常核心的概念, loader有很多种, 不同的内容需要使用不同的loader来加载.

2. loader的使用

我们首先来创建一个css文件, 然后将css文件引入到项目中

第一步: 创建main.css文件

body{
    background-color: #085e7d;
}

第二步: 将main.css文件引入到main.js中

require("./css/main.css")

这是使用commonJs的写法引入的. 引入css以后, 不需要任何返回值, 所以, 我们可以不用写成  "let 变量名 = require(文件路径)"

第三步: 执行npm run build, 会报异常

vwebpack パッケージに使用できるファイルは何ですか?                        

 这个异常的意思是, 缺少合适的loader. 因为我们引入了css, 但是还没有引入解析css的loader.

css需要两个loader :

  • 一个是css-loader
  • 另一个是style-loader

css-loader: 只负责加载css文件, style-loader: 负责将样式加载到Dom中

第四步: 通过npm安装loader

我们的目标是安装loader, 可以去官网找到对应的loader. css文件对应的loader.

官网地址: www.webpackjs.com

vwebpack パッケージに使用できるファイルは何ですか?

 找到css-loader的用法

vwebpack パッケージに使用できるファイルは何ですか?

安装命令

npm install --save-dev css-loader

第五步: 在webpack.config.js中的modules关键字下配置

　　module: {
        rules: [    
            {
                test: /\.css$/,
                use: [&#39;css-loader&#39;]
            }

        ]
    }

第六步: 安装style-loader

安装方法和css是一样的.  可以通过查询官网找到方法

安装style-loader命令

npm install --save-dev style-loader

然后在将style-loader放在css-loader的前面

module: {
    rules: [
        {
            test: /\.css$/,
            // css-loader: 只负责加载css文件
            // style-loader: 负责将样式加载到Dom中
            // 注意: 使用loader加载的时候, 是从右向左加载的. 所以, 先加载css-loader, 在加载style-loader
            use: [&#39;style-loader&#39;,&#39;css-loader&#39; ]
        }

    ]
}

为什么需要将style-loader放在前面呢? 

其实在解析css的过程中, 先用到的是css-loader, 然后使用到的是style-loader. 但是webpack.config.js在解析的时候, 是从右往左解析的. 

第七步: 打包

npm run build

打包以后报错: 

css (node:93638) UnhandledPromiseRejectionWarning: TypeError: this.getResolve is not a function

遇到这个问题, 说明版本不合适, 我们使用的webpack是3.6.0的版本, 打包的时候, 我们需要重新制定一下css-loader和style-loader的版本号

打开package.json, 找到devDependencies

"devDependencies": {
    "css-loader": "^2.1.1",
    "style-loader": "^2.0.0",
    "webpack": "^3.6.0",
  }

指定css-loader和style-loader的版本号分别是2.1.1和2.0.0

再次打包, 成功!

六. webpack打包less文件

 其实我们知道如何打包css文件了, 那么打包less文件方法是类似的 

第一步: 定义一个less文件

我们定义一个less文件, 起个名字common.less

@fontsize: 24px;
@fontcolor: #5112b8;

body {
  font-size: @fontsize;
  color: @fontcolor;
}

第二步: 将less文件import引入到main.js中

require("./css/special.less")

第三步: 安装less组件, 应该安装哪些组件呢? 可以看https://cn.vuejs.org/v2/guide/

查询官网: www.webpackjs.com

vwebpack パッケージに使用できるファイルは何ですか?

安装组件命令

npm install --save-dev less-loader less

添加规则

module.exports = {
    ...
    module: {
        rules: [{
            test: /\.less$/,
            use: [{
                loader: "style-loader" // creates style nodes from JS strings
            }, {
                loader: "css-loader" // translates CSS into CommonJS
            }, {
                loader: "less-loader" // compiles Less to CSS
            }]
        }]
    }
};

注意: 顺序不能改变

第四步: 重新打包.

npm run build

七. webpack打包图片文件

下面来看看webapck是如何打包图片的

第一步: 在css中引入一个图片文件

比如: 我引入了一个背景图

vwebpack パッケージに使用できるファイルは何ですか?

然后将图片作为背景引入到main.css中

body{
    background: url("../img/123.jpeg");
}

第二步: 将main.css文件通过import引入到main.js中

require("./css/main.less")

 我们知道webpack是自动打包工具, 在打包main.js的时候, 他会看里面都引入了哪些内容. 他发现引入了main.css, 就是去自动加载并解析css对应的模块. 在css中引入了图片, 就会去自动加载并解析图片对应的模块. 

第三步: 安装解析图片的组件

查询官网: www.webpackjs.com

我们看到background是通过url引入的, 首先需要url-loader模块. 

安装组件命令

npm install --save-dev url-loader

添加规则

{
    test: /\.(png|jpg|gif|jpeg)$/,
    use: [ {        loader: &#39;url-loader&#39;,
        options: {
            limit: 8000,
        }
    }]
}

我们发现这次引入的时候有一个options参数, 这个参数限制了图片的大小. 

注意: 

  • 当加载的图片, 小于limit时, 会将图片编译成base64字符串形式. --- 不需要文件, 因为他是一个base64字符串
  • 当加载的图片, 大于limit是, 需要使用file-loader模块来加载. --- 当文件来处理, 就需要打包成文件, 需要file-loader

当以文件的形式加载的时候, 需要指定一个打包路径. 否则加载的文件目录是根目录, 结果会找不到文件, 因为我们的文件最终打包到dist下面了.

module.exports={
    // 入口
    entry: "./src/main.js",
    output: {
        path: path.resolve(__dirname, &#39;dist&#39;),
        filename: "bundle.js",        publicPath:"dist/"
    }
...
}

我们可以在output位置增加publicPath:"dist/" 以后, 所有的路径类的文件在打包编译的时候, 都会打包到这个路径下面

八. webpack打包--将ES6打包成ES5 

 为什么需要将es6打包成es5呢? 因为上述方式的webpack打包后, 并没有将ES6的语法转换成ES5的, 比如:

vwebpack パッケージに使用できるファイルは何ですか?

 这会有什么问题呢?

有些浏览器可能不认识. 因为不是所有的浏览器都兼容ES6, 但基本所有的浏览器都兼容ES5的语法. 因此我们需要将ES6的语法转换成ES5的语法

 方法和上面是一样的.

 第一步: 安装组件

打包ES6到ES5需要的组件是bebal

查询官网需要安装哪些组件: www.webpackjs.com

vwebpack パッケージに使用できるファイルは何ですか?

 安装命令:

npm install --save-dev babel-loader@7 babel-core babel-preset-es2015

我们这里安装的是babel-loader的7的版本. babel-preset的版本是es2015

 第二步: 配置babel-loader组件

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: &#39;babel-loader&#39;,
        options: {
          presets: [&#39;es2015&#39;]
        }
      }
    }
  ]
}

这个配置里面指定了exclude, 排除哪些目录: 这里排除了node_modules目录, 因为这个目录下的文件我们不需要打包. 是node编译需要的内容. 

presets属性,用来指定将es6转换成es5需要的版本. 我们这里直接填es2015就可以了.

第三步: 打包

npm run build

这次在去看bundle.js文件, 里面就没有es6的语法了

【相关推荐：vuejs视频教程、web前端开发】

以上がvwebpack パッケージに使用できるファイルは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
関連記事
ReactとFrontend：インタラクティブエクスペリエンスの構築ReactとFrontend：インタラクティブエクスペリエンスの構築Apr 11, 2025 am 12:02 AM

Reactは、インタラクティブなフロントエンドエクスペリエンスを構築するための好ましいツールです。 1）Reactは、コンポーネント化と仮想DOMを通じてUIの開発を簡素化します。 2）コンポーネントは、関数コンポーネントとクラスコンポーネントに分割されます。関数コンポーネントはよりシンプルで、クラスコンポーネントはより多くのライフサイクル方法を提供します。 3）Reactの作業原則は、パフォーマンスを改善するために仮想DOMおよび調整アルゴリズムに依存しています。 4）国家管理は、usestateまたはthis.stateを使用し、ComponentDidmountなどのライフサイクルメソッドが特定のロジックに使用されます。 5）基本的な使用には、コンポーネントの作成と状態の管理が含まれ、高度な使用にはカスタムフックとパフォーマンスの最適化が含まれます。 6）一般的なエラーには、不適切なステータスの更新とパフォーマンスの問題が含まれます。

反応とフロントエンドスタック：ツールとテクノロジー反応とフロントエンドスタック：ツールとテクノロジーApr 10, 2025 am 09:34 AM

Reactは、コアコンポーネントと状態管理を備えたユーザーインターフェイスを構築するためのJavaScriptライブラリです。 1）コンポーネントと州の管理を通じてUIの開発を簡素化します。 2）作業原則には和解とレンダリングが含まれ、React.memoとusememoを通じて最適化を実装できます。 3）基本的な使用法は、コンポーネントを作成およびレンダリングすることであり、高度な使用法にはフックとコンテキストアピの使用が含まれます。 4）不適切なステータスの更新などの一般的なエラーでは、ReactDevtoolsを使用してデバッグできます。 5）パフォーマンスの最適化には、React.MEMO、仮想化リスト、コードスプリッティの使用が含まれ、コードを読みやすく保守可能に保つことがベストプラクティスです。

HTMLにおけるReactの役割：ユーザーエクスペリエンスの向上HTMLにおけるReactの役割：ユーザーエクスペリエンスの向上Apr 09, 2025 am 12:11 AM

ReactはJSXとHTMLを組み合わせてユーザーエクスペリエンスを向上させます。 1）JSXはHTMLを埋め込み、開発をより直感的にします。 2）仮想DOMメカニズムは、パフォーマンスを最適化し、DOM操作を削減します。 3）保守性を向上させるコンポーネントベースの管理UI。 4）国家管理とイベント処理は、インタラクティブ性を高めます。

反応コンポーネント：HTMLで再利用可能な要素を作成します反応コンポーネント：HTMLで再利用可能な要素を作成しますApr 08, 2025 pm 05:53 PM

Reactコンポーネントは、機能またはクラスによって定義され、UIロジックのカプセル化、およびプロップを介して入力データを受け入れることができます。 1）コンポーネントの定義：関数またはクラスを使用して、反応要素を返します。 2）レンダリングコンポーネント：Reactコールレンダリングメソッドまたは機能コンポーネントを実行します。 3）マルチプレックスコンポーネント：データをプロップに渡して、複雑なUIを構築します。コンポーネントのライフサイクルアプローチにより、ロジックをさまざまな段階で実行でき、開発効率とコードメンテナビリティが向上します。

厳密なモードの目的を反応します厳密なモードの目的を反応しますApr 02, 2025 pm 05:51 PM

React Strictモードは、追加のチェックと警告をアクティブにすることにより、Reactアプリケーションの潜在的な問題を強調する開発ツールです。これは、レガシーコード、安全でないライフサイクル、および副作用を特定するのに役立ち、現代の反応の実践を促進します。

断片の使用法を使用します断片の使用法を使用しますApr 02, 2025 pm 05:50 PM

反応フラグメントにより、余分なDOMノードなしで子供をグループ化すること、構造、パフォーマンス、アクセシビリティが向上します。それらは、効率的なリストレンダリングの鍵をサポートしています。

反応調整プロセス反応調整プロセスApr 02, 2025 pm 05:49 PM

この記事では、Reactの和解プロセスについて説明し、DOMを効率的に更新する方法について詳しく説明しています。重要な手順には、調整のトリガー、仮想DOMの作成、拡散アルゴリズムの使用、最小限のDOM更新の適用が含まれます。また、Perfoをカバーしています

仮想DOMが説明しました仮想DOMが説明しましたApr 02, 2025 pm 05:49 PM

この記事では、直接的なDOM操作を最小限に抑え、更新を最適化することでパフォーマンスを向上させるWeb開発の重要な概念である仮想DOMについて説明します。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

もっと見る

人気の記事

R.E.P.O.説明されたエネルギー結晶と彼らが何をするか（黄色のクリスタル）
3週間前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最高のグラフィック設定
3週間前By尊渡假赌尊渡假赌尊渡假赌
アサシンのクリードシャドウズ：シーシェルリドルソリューション
2週間前ByDDD
R.E.P.O.誰も聞こえない場合はオーディオを修正する方法
3週間前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25：Myriseのすべてのロックを解除する方法
3週間前By尊渡假赌尊渡假赌尊渡假赌
もっと見る

ホットツール

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。

PhpStorm Mac バージョン

PhpStorm Mac バージョン

最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

SublimeText3 英語版

SublimeText3 英語版

推奨: Win バージョン、コードプロンプトをサポート!

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

もっと見る

ホットトピック

Gmailメールのログイン入り口はどこですか？
7465
15
CakePHP チュートリアル
1376
52
Steamのアカウント名の形式は何ですか
77
11
Win11 Activation Key Permanent
45
19
NYTの接続はヒントと回答です
18
19
もっと見る