Webパッケージとバーベルの使用

パウエルは?
ブラウザのJavaScriptエンジンで実行するために、コードを最新バージョンのJavaScriptコード、JSX、およびType Scriptコードに変換するコンパイラ.

// ES2020 nullish coalescing
function greet(input) {
  return input ?? "Hello world";
}

JavaScript最新構文(ES 2020)で記述されたコードをES 5構文に変換します.

function greet(input) {
  return input != null ? input : "Hello world";
}

プラグイン(plugins)
実際,バーベルはパケット化と生成,およびプラグインによるコード変換の役割を果たす.したがって、変換が必要な場合は、以下のようにプラグインをインストールします.npm install @babel/plugin-transform-template-literalsプリセット(presets)
必要なプラグインをすべてインストールするのは面倒です.複数のプラグインを含むプリセットを使用すると便利です.以下のコマンドでインストールできます.npm install @babel/preset-<필요한 프리셋>バーベルは4つのプリセットを提供します.

@babel/preset-env for ES6

@babel/preset-typescript for TypeScript

@babel/preset-react for React

@babel/preset-flow for Flow

バーベルの実行方法@babel/cli、Webパッケージのbabel-loader、@babel/core、@babel/register実行可能バーベル.
1. @babel/cli

package.jsonファイルの作成npm init

ラベル関連パッケージのインストールnpm install --save-dev @babel/core @babel/cli必要なプラグイン、プリセットのインストールnpm install --save-dev @babel/plugin-transform-arrow-functions @babel/plugin-transform-arrow-functions @babel/preset-react

バーベルをセットする
CLIまたはconfigファイルを使用してラベルを設定できます.
configファイルには.babelrc.jsonまたはbabel.config.jsがあり、バーベルは後者を推奨します.
-.babelrc.json:一部のプロジェクトに適用したい場合
-babel.config.js:プロジェクト全体(プロジェクトのルートディレクトリに存在する必要があります)で設定babel.config.jsバーベルをファイルに設定すると、インストールされているプラグインまたはプリセットが挿入されます.

const presets = ['@babel/preset-react'];
const plugins = [
    '@babel/plugin-transform-template-literals',
    '@babel/plugin-transform-arrow-functions',
];

module.exports = { presets, plugins };

バーベル運転
CLIでバーベルを設定する場合は、次のコマンドを実行します.npx babel <변환할 폴더> --presets=<설치한 프리셋> --plugins=<설치한 플러그인> --out-dir <변환된 파일 저장 폴더>configファイルを使用してバーベルを設定した場合は、次のコマンドを実行します.npx babel <변환할 폴더> --out-dir <변환된 파일 저장 폴더>

├── package.json
├── index.html
├── src
│   ├── index.js
│   └── templates
│       └── formTemplate.js
└── babel.config.js

上記のフォルダ構造でsrcフォルダ内のファイルを変換する場合は、npx babel src --out-dir distコマンドを発行し、プロジェクトのルートディレクトリにdistフォルダを作成し、変換したコードファイルを格納します.
2.Webパッケージbabel-loaderバーベルにもプロファイルがあり、Webパッケージにもプロファイルがあります.Webパッケージとバーベルを同時に使用したい場合は、babel-loaderをインストールし、Webパッケージのプロファイルに追加できます.(バーベルプロファイルに追加されたpresets、pluginsはoptionsに設定できます.)

// webpack.config.js
// ...
rules: [
  // the 'transform-runtime' plugin tells Babel to
  // require the runtime instead of inlining it.
  {
    test: /\.m?js$/,
    exclude: /(node_modules|bower_components)/,
    use: {
      loader: 'babel-loader',
      options: {
        presets: ['@babel/preset-env'],
        plugins: ['@babel/plugin-transform-runtime']
      }
    }
  }
]
// ...

Webパッケージとは?
複数のJavaScriptファイルを組み合わせたBundler.
loader
WebパッケージではJavaScriptファイルとjsonファイルしか理解できないため、タイプスクリプトまたはCSSファイルを理解するにはロードプログラムを使用する必要があります.
JavaScriptファイルrequire()またはimportに任意のファイルを入れることができます.ロードプログラムは、追加したファイルをWebパッケージで理解できるファイルに変換します.
npmを使用して使用するローダーをインストールすると、webspackのプロファイルmoduleのrulesに追加できます.以下に示します.

// webpack.config.js
const path = require('path');

module.exports = {
  output: {
    filename: 'my-first-webpack.bundle.js',
  },
  module: {
    rules: [{ test: /\.txt$/, use: 'raw-loader' }],
  },
};

test:変換するファイル拡張子

use:使用するローダ

Webパッケージの実行方法
1. @webpack/cli

Webパッケージ設定ファイルがない場合
CLI設定を使用することで、Webパッケージを実行できます.npx webpack --entry <entry 파일> --output-path <번들링된 결과가 저장될 path>

Webパッケージ設定ファイルがある場合
webpack.config.jsファイルがある場合、webspackはファイルを表示し、webspackを実行します.npx webpack

2.npmスクリプトで実行
package.jsonファイルに次のコードを追加します.

    "scripts": {
        "build": "webpack --mode=none",
    },

npm run buildコマンドを実行すると、結果ファイルは「webパッケージ設定」ファイルで指定したフォルダに保存されます.
Webパッケージ設定の追加
webpack dev server
Webパッケージのバンドル先となるコードを変更した場合は、Webパッケージを再実行する必要がありますが、Web pack dev serverを使用すると、変更が自動的に適用され、ブラウザにレンダリングされます.
Webpack-dev-server,packageをインストールします.jsonファイルのscript部分は以下の通りです.npm install --save-dev webpack-dev-server

    "scripts": {
        "start": "webpack serve --mode=production",
    },

html-webpack-plugin
WebパッケージはJavaScriptファイルを組み合わせたものです.では最後はindexバインドされたJavaScriptファイルをhtmlファイルに追加する必要があります.html-webpack-pluginを使用するだけです.npm install --save-dev html-webpack-plugin

// webpack.config.js
module.exports = {
    // ...
    plugins: [new HtmlWebpackPlugin({ template: './index.html' })],
};

reference

Concepts | webpack

フロントエンド開発環境の理解:Webパッケージ(基本) 2019年12月10日

実際の反応プログラミング