babelに関するいくつかのパッケージ理解7.Xバージョン
2018年10月10日14:52:14 yedegesong読解数5350 Babel構成部分@babel/core*必ずbabelコアパッケージ、コンパイラを装着します.変換APIの提供
@babel/cli babelのコマンドラインツールで、jsコードをコマンドラインで変換
具体的なコマンドは次のとおりです.https://babeljs.io/docs/en/babel-cli
babel/cliコンパイラ/node_を起動modules/.bin/babel非グローバルインストール
srcディレクトリの下のすべてのjsファイルをlibディレクトリにコンパイルして出力します
./node_modules/.bin/babel src --out-dir lib
ファイルを変更するたびにファイルをコンパイルするには、–watchまたは-wオプションを使用します.
./node_modules/.bin/babel --watch --out-file script-compiled.js
@babel/polyfill注意babel 7の@babel/polyfillは@babel/runtime-corejs 2の別名です
詳細アドレス:https://babeljs.io/docs/en/v7-migration
babel 7では、削除提案polyfill@babel/polyfillと@babel/runtime-corejs 2+@babel/plugin-transform-runtimeプラグインの使用について説明します
Babelコンパイルでは構文のみを変換し、ほとんどすべての新しいJavaScript構文をコンパイルできますが、BOMでは互換性のないAPI、例えばPromise、Set、Symbol、Arrayは変換されません.from、asyncなどのいくつかのAPIはこの時polyfillを必要としてこれらのAPIを変換して翻訳します*グローバルオブジェクトと内蔵オブジェクトのprototypeに方法を追加することによって実現して、グローバル変数の汚染をもたらして、@babel/plugin-transform-runtimeを結合してグローバル汚染を避けることができて、使用方法は以下を見ます
//.babelrc{"plugins":["@babel/plugin-transform-runtime",{"corejs":2}]}@babel/register Babelを使用する方法の1つはrequireフックを使用することです.requireフックは、ノードrequireに自分自身をバインドし、ファイルを自動的にコンパイルします.
nodeで@babel/registerを使用して、requireでファイルをロードするときにbabelを自動的に動的にコンパイルします.
require("@babel/register"); require(./test.js))Presets、例えばenv、stage-0、stage-1などのenvはbabelがes 6関連のコンパイルモジュールをロードすることを示し、stage-0は何を表しますか?ステージシリーズにはes 7のドラフトにサポートされるプラグインがいくつか集合しており、ドラフトであるため、プラグインの形式として提供されている.
以下は公式に提供されているpresetsです.
BabelでコンパイルできないES 5の新しい構文の詳細は、次のように移動してください.https://github.com/babel/babel/blob/master/packages/babel-plugin-transform-runtime/src/definitions.js
@babel/preset-env*必須パッケージには、次の基準があります.
@babel/preset-es 2015,@babel/preset-es 2016,@babel/preset-es 2017
ES3 member-expression-literals property-literals reserved-words ES5 property-mutators ES2015 arrow-functions block-scoped-functions block-scoping classes computed-properties destructuring duplicate-keys for-of function-name instanceof literals new-target object-super parameters shorthand-properties spread sticky-regex template-literals typeof-symbol unicode-regex ES2016 exponentiation-operator ES2017 async-to-generator
@babel/preset-stage-0
@babel/preset-stage-1
@babel/preset-stage-2//プリセットを開くには以下に示すプラグインをインストールする必要があります
@babel/preset-stage-3
これらのフェーズに対応するメソッドレベル:Babel 7公式推奨:Babel v 7まで、すべてのフェーズプリセットが破棄されました
{ “plugins”: [//Stage 0 “@babel/plugin-proposal-function-bind”,
] }
plugins変換はプラグインの形式で現れ、プラグインは小型JavaScriptプログラムであり、Babelがコードをどのように変換するかを示す.
@babel/plugin-transform-runtime*必ずインストールするすべてのヘルプは、コンパイル出力の重複を避けるためにモジュールを参照します.実行時にコンストラクションにコンパイルされます.重複するrequireモジュール方式が導入されます.
/***@babel/plugin-transform-runtime*/"use strict";
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
_extends({}, { name: “abc” });
/***@babel/plugin-transform-runtime*/「use strict」が使用されています.
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
(0, _extends2.default)({}, { name: “abc” }); @Babel/runtime-corejs 2コンパイルは、ObjectのようなES 5構文を持つ.assignなどのルートの古いバージョンライブラリ@babel/polyfillは似ています.一般的に@babel/plugin-transform-runtimeと組み合わせて使用する.詳細な構成の使用については、を参照してください.babelrcファイル
install the runtime as a dependency
@babel/cli babelのコマンドラインツールで、jsコードをコマンドラインで変換
具体的なコマンドは次のとおりです.https://babeljs.io/docs/en/babel-cli
babel/cliコンパイラ/node_を起動modules/.bin/babel非グローバルインストール
srcディレクトリの下のすべてのjsファイルをlibディレクトリにコンパイルして出力します
./node_modules/.bin/babel src --out-dir lib
ファイルを変更するたびにファイルをコンパイルするには、–watchまたは-wオプションを使用します.
./node_modules/.bin/babel --watch --out-file script-compiled.js
@babel/polyfill注意babel 7の@babel/polyfillは@babel/runtime-corejs 2の別名です
詳細アドレス:https://babeljs.io/docs/en/v7-migration
babel 7では、削除提案polyfill@babel/polyfillと@babel/runtime-corejs 2+@babel/plugin-transform-runtimeプラグインの使用について説明します
Babelコンパイルでは構文のみを変換し、ほとんどすべての新しいJavaScript構文をコンパイルできますが、BOMでは互換性のないAPI、例えばPromise、Set、Symbol、Arrayは変換されません.from、asyncなどのいくつかのAPIはこの時polyfillを必要としてこれらのAPIを変換して翻訳します*グローバルオブジェクトと内蔵オブジェクトのprototypeに方法を追加することによって実現して、グローバル変数の汚染をもたらして、@babel/plugin-transform-runtimeを結合してグローバル汚染を避けることができて、使用方法は以下を見ます
//.babelrc{"plugins":["@babel/plugin-transform-runtime",{"corejs":2}]}@babel/register Babelを使用する方法の1つはrequireフックを使用することです.requireフックは、ノードrequireに自分自身をバインドし、ファイルを自動的にコンパイルします.
nodeで@babel/registerを使用して、requireでファイルをロードするときにbabelを自動的に動的にコンパイルします.
require("@babel/register"); require(./test.js))Presets、例えばenv、stage-0、stage-1などのenvはbabelがes 6関連のコンパイルモジュールをロードすることを示し、stage-0は何を表しますか?ステージシリーズにはes 7のドラフトにサポートされるプラグインがいくつか集合しており、ドラフトであるため、プラグインの形式として提供されている.
以下は公式に提供されているpresetsです.
BabelでコンパイルできないES 5の新しい構文の詳細は、次のように移動してください.https://github.com/babel/babel/blob/master/packages/babel-plugin-transform-runtime/src/definitions.js
@babel/preset-env*必須パッケージには、次の基準があります.
@babel/preset-es 2015,@babel/preset-es 2016,@babel/preset-es 2017
ES3 member-expression-literals property-literals reserved-words ES5 property-mutators ES2015 arrow-functions block-scoped-functions block-scoping classes computed-properties destructuring duplicate-keys for-of function-name instanceof literals new-target object-super parameters shorthand-properties spread sticky-regex template-literals typeof-symbol unicode-regex ES2016 exponentiation-operator ES2017 async-to-generator
@babel/preset-stage-0
@babel/preset-stage-1
@babel/preset-stage-2//プリセットを開くには以下に示すプラグインをインストールする必要があります
@babel/preset-stage-3
これらのフェーズに対応するメソッドレベル:Babel 7公式推奨:Babel v 7まで、すべてのフェーズプリセットが破棄されました
{ “plugins”: [//Stage 0 “@babel/plugin-proposal-function-bind”,
// Stage 1
"@babel/plugin-proposal-export-default-from",
"@babel/plugin-proposal-logical-assignment-operators",
["@babel/plugin-proposal-optional-chaining", { "loose": false }],
["@babel/plugin-proposal-pipeline-operator", { "proposal": "minimal" }],
["@babel/plugin-proposal-nullish-coalescing-operator", { "loose": false }],
"@babel/plugin-proposal-do-expressions",
// Stage 2
["@babel/plugin-proposal-decorators", { "legacy": true }], //
"@babel/plugin-proposal-function-sent",
"@babel/plugin-proposal-export-namespace-from",
"@babel/plugin-proposal-numeric-separator",
"@babel/plugin-proposal-throw-expressions",
// Stage 3
"@babel/plugin-syntax-dynamic-import",
"@babel/plugin-syntax-import-meta",
["@babel/plugin-proposal-class-properties", { "loose": false }],
"@babel/plugin-proposal-json-strings"
] }
plugins変換はプラグインの形式で現れ、プラグインは小型JavaScriptプログラムであり、Babelがコードをどのように変換するかを示す.
@babel/plugin-transform-runtime*必ずインストールするすべてのヘルプは、コンパイル出力の重複を避けるためにモジュールを参照します.実行時にコンストラクションにコンパイルされます.重複するrequireモジュール方式が導入されます.
/***@babel/plugin-transform-runtime*/"use strict";
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
_extends({}, { name: “abc” });
/***@babel/plugin-transform-runtime*/「use strict」が使用されています.
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
(0, _extends2.default)({}, { name: “abc” }); @Babel/runtime-corejs 2コンパイルは、ObjectのようなES 5構文を持つ.assignなどのルートの古いバージョンライブラリ@babel/polyfillは似ています.一般的に@babel/plugin-transform-runtimeと組み合わせて使用する.詳細な構成の使用については、を参照してください.babelrcファイル
install the runtime as a dependency
npm install @babel/runtime-corejs2
install the plugin as a devDependency
npm install @babel/plugin-transform-runtime --save-dev
@babel/plugin-transform-object-assignはObjectをコンパイルするために使用する.assign
@babel/plugin-proposal-class-properties解析クラスのプロパティclass Bork{//property initializer syntax instanceProperty="bork";boundFunction=()=>{return this.instanceProperty;}//Static class properties
static staticProperty = "babelIsCool";
static staticFunction = function() {
return Bork.staticProperty;
};
}
let myBork = new Bork;
//Property initializers are not on the prototype. console.log(myBork.proto.boundFunction);//> undefined
//Bound functions are bound to the class instance. console.log(myBork.boundFunction.call(undefined));//> “bork”
//Static function exists on the class. console.log(Bork.staticFunction());//> 「babelIsCool」@babel/plugin-proposal-decoratorsデコレーション@annotation class MyClass{}
function annotation(target) { target.annotated = true; } プロファイルbabelrc
{ “presets”: ["@babel/preset-env"], “plugins”: [ ["@babel/plugin-transform-runtime",{“corejs”: 2}], “@babel/plugin-transform-object-assign”, ["@babel/plugin-proposal-decorators", { “legacy”: true }], “@babel/plugin-proposal-class-properties” ] } package.json { “name”: “babel”, “version”: “1.0.0”, “description”: “”, “main”: “index.js”, “scripts”: { “test”: “echo “Error: no test specified” && exit 1” }, “author”: “”, “license”: “ISC”, “devDependencies”: { “@babel/cli”: “^7.1.2”, “@babel/core”: “^7.1.2”, “@babel/preset-env”: “^7.1.0”, “@babel/plugin-transform-runtime”: “^7.1.0”, “@babel/runtime-corejs2”: “^7.1.2”, “@babel/plugin-proposal-class-properties”: “^7.1.0”, “@babel/plugin-proposal-decorators”: “^7.1.2”, “@babel/plugin-transform-object-assign”: “^7.0.0” }, “dependencies”: {
} }
npm install @babel/plugin-transform-runtime --save-dev
@babel/plugin-transform-object-assignはObjectをコンパイルするために使用する.assign
@babel/plugin-proposal-class-properties解析クラスのプロパティclass Bork{//property initializer syntax instanceProperty="bork";boundFunction=()=>{return this.instanceProperty;}
//Static class properties
static staticProperty = "babelIsCool";
static staticFunction = function() {
return Bork.staticProperty;
};
}
let myBork = new Bork;
//Property initializers are not on the prototype. console.log(myBork.proto.boundFunction);//> undefined
//Bound functions are bound to the class instance. console.log(myBork.boundFunction.call(undefined));//> “bork”
//Static function exists on the class. console.log(Bork.staticFunction());//> 「babelIsCool」@babel/plugin-proposal-decoratorsデコレーション@annotation class MyClass{}
function annotation(target) { target.annotated = true; } プロファイルbabelrc
{ “presets”: ["@babel/preset-env"], “plugins”: [ ["@babel/plugin-transform-runtime",{“corejs”: 2}], “@babel/plugin-transform-object-assign”, ["@babel/plugin-proposal-decorators", { “legacy”: true }], “@babel/plugin-proposal-class-properties” ] } package.json { “name”: “babel”, “version”: “1.0.0”, “description”: “”, “main”: “index.js”, “scripts”: { “test”: “echo “Error: no test specified” && exit 1” }, “author”: “”, “license”: “ISC”, “devDependencies”: { “@babel/cli”: “^7.1.2”, “@babel/core”: “^7.1.2”, “@babel/preset-env”: “^7.1.0”, “@babel/plugin-transform-runtime”: “^7.1.0”, “@babel/runtime-corejs2”: “^7.1.2”, “@babel/plugin-proposal-class-properties”: “^7.1.0”, “@babel/plugin-proposal-decorators”: “^7.1.2”, “@babel/plugin-transform-object-assign”: “^7.0.0” }, “dependencies”: {
} }