vue-cliでbabel設定ファイルを設定する方法

Babel は、既存の環境で実行できるように ES6 コードを ES5 コードに変換できる、広く使用されているトランスコーダーです。この記事では、vue-cli スキャフォールディング ツールのルート ディレクトリにある 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 で指定されたさまざまな環境変数に対してさまざまなコンパイル操作を実行できます。

上記は私があなたのためにまとめたものです。

関連記事:

ImmutableとReactの実践スキルを詳しく解説

VUEX互換IEでのエラー問題の解決方法(詳細チュートリアル)

Node.jsでreadlineを使って実装する方法ファイルの内容を 1 行ずつ読み書きします

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