vue-clibabel 設定ファイル.babelrc の使用方法

今回は、vue-clibabel設定ファイル.babelrcの使い方と、vue-clibabel設定ファイル.babelrcを使用する際の注意点を紹介します。

この記事では、vue-cli スキャフォールディング ツールのルート ディレクトリにある babelrc 設定ファイルを紹介します

はじめに

ブラウザはまだすべての es6 機能をサポートしているわけではありませんが、es6 を使用するのが一般的な傾向であるため、es6 コードをブラウザが認識できるコードに変換するために babel が登場しました

babel は、トランスコーディングを容易にする特別なコマンドライン ツールを提供します。これについては自分で学ぶことができます

vue-cli スキャフォールディング用の .babelrc ファイル

{
 // 此项指明，转码的规则
 "presets": [
 // env项是借助插件babel-preset-env，下面这个配置说的是babel对es6,es7,es8进行转码，并且设置amd,commonjs这样的模块化文件，不进行转码
 ["env", { "modules": false }],
 // 下面这个是不同阶段出现的es语法，包含不同的转码插件
 "stage-2"
 ],
 // 下面这个选项是引用插件来处理代码的转换，transform-runtime用来处理全局函数和优化babel编译
 "plugins": ["transform-runtime"],
 // 下面指的是在生成的文件中，不产生注释
 "comments": false,
 // 下面这段是在特定的环境中所执行的转码规则，当环境变量是下面的test就会覆盖上面的设置
 "env": {
 // test 是提前设置的环境变量，如果没有设置BABEL_ENV则使用NODE_ENV，如果都没有设置默认就是development
 "test": {
  "presets": ["env", "stage-2"],
  // instanbul是一个用来测试转码后代码的工具
  "plugins": ["istanbul"]
 }
 }
}

ps: .babelrc 設定ファイルについてご紹介します

React プロジェクトの構造に関しては、設定ファイルが多く、理解するのが難しい場合があります。

たとえば、.babelrc ファイルは、トランスコーディング ルールとプラグインを設定するために使用されます。

Linux に精通している場合は、rc で終わるファイルは通常、実行時に自動的にロードされるファイル、構成などを表すことを知っておく必要があります。 babel6ではこのファイルは必須です。 将来 babel の cli を使用するときに、babel コマンドを設定できます。 env フィールドもあり、 で指定されたさまざまな環境変数に対してさまざまなコンパイル操作を実行できます。
BABEL_ENV或者NODE_ENVこの記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

Vuex ミューテーションとアクションの使用の詳細な説明

FileReader は画像をアップロードする前にローカル プレビューを実装します

以上がvue-clibabel 設定ファイル.babelrc の使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。