Vue+webpack+Element対応問題まとめ（まとめ）
プロジェクトではVue.jsとElenment-UIを使用しています。
Vue公式文書には明確な範囲が与えられています。VueはIE 8および以下のバージョンをサポートしていません。なぜなら、VueはIE 8では真似できないECMAScript 5の特性を使用しています。しかし、ECMAScript 5対応のブラウザはすべてサポートされています。
また、Element-UIは、IE 10＋及びほとんどのブラウザをサポートしています。これによりBabelを使用するには、ECMAScript 2015＋コードを古いブラウザまたは環境における後方互換性のあるJavaScriptバージョンに変換するために主に使用される。その前に、まずIE 6~11がS 5をサポートしているかどうかを確認する必要があります。 IE 6~IE 8:s 5のすべての文法はサポートされていません。 IE 9：ECMAScript 5 Strict Mode以外のes 5文法をサポートします。 IE 10：es 5のすべての文法をサポートします。 IEÏ11:es 5のすべての文法とes 6のconstとTyped Araysの新しい文法をサポートします。
babelは同じ言語の高いバージョンの規則を低バージョンの規則に翻訳できます。その翻訳過程も三つの段階に分けられます。1）解析ステップはコードを受信してAST（抽象文法ツリー）を出力します。この中にはまた二つの段階の語彙分析と文法分析が含まれています。ワード分析段階では、文字列形式のコードをトークンストリームに変換する。構文解析段階では、1つのトークンストリームをAST形式に変換し、後続の動作を容易にする。2）私たちが配置したplugins/presetsを利用して、Paserが生成したASTを新しいASTに変えます。3）コード生成ステップは、AST全体を深度優先で巡回し、変換後のコードを表す文字列を構築する。
Babelの使用をまとめます。
1、プロジェクトはwebpackパッケージツールを使用していますので、インストールします。
3、ルートディレクトリの下で作成します。Babelrcファイルにプラグインを追加します。ファイルの追加に成功したら、設定内容を開始できます。
まず、ES 2015＋の変換をサポートするevnプリセットを使用することができます。
もちろん、オプションもあります。例えば、 ターゲツ.nodeはどのバージョンの までサポートしますか？ node target.browsersはどのバージョンのブラウザ までサポートしますか？ looseはゆとりモードを起動し、webpackのloaderに合わせて を使用する。 modulesはどのようなモジュールローディング機構を使用しますか？ debugオープンデバッグモード includeにはどのファイルが含まれていますか？ excludeはどのファイルを排除しますか？ use BuiiltInsはBabel-polyfillを分解するかどうか、必要な部分だけを紹介します。
targets.browsersは、browserslist https://github.com/browserslist/browserslistを参照してブラウザ条件を設定します。
設定が完了したら、ブラウザでサポートできない生コードをBabel-polyfillで実現する必要があります。ブラウザに対応するpolyfillを導入した後、PromiseやWeakMapなどの新しい内蔵オブジェクトを使用して、Aray.fromやObject.assignなどの静的な方法ができます。しかし、Babel-polyfillはプロトタイプチェーンに直接方法を加えるので、グローバル変数を汚染し、パッケージ化してから体積が増加します。
プリセットの前にプラグインが実行されます。プラグインは最初から最後までの順に実行されます。プリセットでは、最後から最初の逆順に設定します。設定時は、実行順序に注意してください。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。
Vue公式文書には明確な範囲が与えられています。VueはIE 8および以下のバージョンをサポートしていません。なぜなら、VueはIE 8では真似できないECMAScript 5の特性を使用しています。しかし、ECMAScript 5対応のブラウザはすべてサポートされています。
また、Element-UIは、IE 10＋及びほとんどのブラウザをサポートしています。これによりBabelを使用するには、ECMAScript 2015＋コードを古いブラウザまたは環境における後方互換性のあるJavaScriptバージョンに変換するために主に使用される。その前に、まずIE 6~11がS 5をサポートしているかどうかを確認する必要があります。
babelは同じ言語の高いバージョンの規則を低バージョンの規則に翻訳できます。その翻訳過程も三つの段階に分けられます。1）解析ステップはコードを受信してAST（抽象文法ツリー）を出力します。この中にはまた二つの段階の語彙分析と文法分析が含まれています。ワード分析段階では、文字列形式のコードをトークンストリームに変換する。構文解析段階では、1つのトークンストリームをAST形式に変換し、後続の動作を容易にする。2）私たちが配置したplugins/presetsを利用して、Paserが生成したASTを新しいASTに変えます。3）コード生成ステップは、AST全体を深度優先で巡回し、変換後のコードを表す文字列を構築する。
Babelの使用をまとめます。
1、プロジェクトはwebpackパッケージツールを使用していますので、インストールします。
npm install --save-dev babel-loader babel-core
module: {
rules: [
{
test: /\.js$/,
loader: "babel-loader",
include: [
resolve("src"),
resolve("test"),
],
},Ï
]
}
3、ルートディレクトリの下で作成します。Babelrcファイルにプラグインを追加します。ファイルの追加に成功したら、設定内容を開始できます。
まず、ES 2015＋の変換をサポートするevnプリセットを使用することができます。
npm install babel-preset-env --save-dev
{
"presets":["evn"]
}もちろん、オプションもあります。例えば、
[
"env",
{
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions"]
}
}
"stage-2"
],
targets.browsersは、browserslist https://github.com/browserslist/browserslistを参照してブラウザ条件を設定します。
設定が完了したら、ブラウザでサポートできない生コードをBabel-polyfillで実現する必要があります。ブラウザに対応するpolyfillを導入した後、PromiseやWeakMapなどの新しい内蔵オブジェクトを使用して、Aray.fromやObject.assignなどの静的な方法ができます。しかし、Babel-polyfillはプロトタイプチェーンに直接方法を加えるので、グローバル変数を汚染し、パッケージ化してから体積が増加します。
npm install --save babel-polyfill
require("babel-polyfill")；
import("babel-polyfill");
module.exports = { entry: ["babel-polyfill", "./app/js"] };
"plugins": [
[
"transform-runtime",
{
"helpers": false,
"polyfill": true,
"moduleName": "babel-runtime"
}
],
]
プリセットの前にプラグインが実行されます。プラグインは最初から最後までの順に実行されます。プリセットでは、最後から最初の逆順に設定します。設定時は、実行順序に注意してください。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。