web-dev-qa-db-ja.com

Vue CLI 3はベンダーをES5に変換しません

Vue-cli 3プロジェクトがあります。それはかなりうまく機能し、問題なくコンパイルされます。

実際には、ES5コードのみをサポートする古いブラウザをサポートする必要があります。

このプロジェクトでは、ES6で記述されたいくつかの外部ライブラリを統合しました（_reconnecting-websocket_は例です）。

問題

これらの外部を使用してプロジェクトをコンパイルすると、vue-cliによって生成されたコードにはES6コードが含まれます。

たとえば、_chunk-vendors.js_には次のコードがあります。

_/*!
 * Reconnecting WebSocket
 * by Pedro Ladaria <[email protected]>
 * https://github.com/pladaria/reconnecting-websocket
 * License MIT
 */const o=()=>{if("undefined"!==typeof WebSocket)return 
WebSocket},a=t=>"function"===typeof t&&
_

eS6ファットアロー関数const o=()=>{を使用します。したがって、このコードを古いブラウザで実行すると、機能しなくなります。

Vue CLI 3でブラウザサポートを追加するための推奨される方法であると思われるため、ここに_.browserlistrc_ファイルを示します。

_> 1%
last 2 versions
not ie <= 8
Android >= 4
_

vue CLIはES5のアプリコードを適切にトランスパイルします。しかし、ベンダーに対して別のパスを行うことはありません。

vueプロジェクトをCLI v3を使用して構成し、ビルド後に最終トランスパイルパスを作成してファイルがすべてES5互換であることを確認する方法はありますか？

埋め込まれたbabelとwebpackがそれを自動的に行うと考えましたが、そうではないようです。

_vue.config.js_でtranspileDependenciesオプションを使用しようとしましたが、何も変更されず、脂肪の矢印がベンダーチャンクに残っていました。

vue.jsecmascript-6babeljsecmascript-5vue-cli-3
14
BlackHoleGalaxy

babel.config.jsファイルと同じディレクトリにvue.config.jsというファイルを作成します。

このファイルに追加したいのは：-

process.env.VUE_CLI_BABEL_TRANSPILE_MODULES = true;
module.exports = {
  presets: ["@vue/app"]
};

これで、babelを使用して外部モジュールをトランスパイルする必要があります。

これは、vue.config.jsのtranspileDependenciesオプションと組み合わせて使用​​する必要があります。

5
Molemann