質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.68%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Babel

Babelは、JavaScriptの次世代仕様であるECMAScriptのコンパイラ。次世代の標準機能を用いて記述されたコードを、それらの機能に対応していないブラウザでも動作するコードに変換することができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

gulp

gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。

Q&A

解決済

1回答

4330閲覧

IE11+Vue.jsで画面が真っ白になる(@babel/polyfillについて)

nana7777

総合スコア7

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Babel

Babelは、JavaScriptの次世代仕様であるECMAScriptのコンパイラ。次世代の標準機能を用いて記述されたコードを、それらの機能に対応していないブラウザでも動作するコードに変換することができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

gulp

gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。

0グッド

0クリップ

投稿2020/02/28 15:34

編集2020/02/28 16:09

タイトルの通り、vueで作ったページをie11で表示させると画面が真っ白になります。
https://nansystem.com/migrate-babel-polyfill-to-core-js/
こちらのページを参考に環境を作りました。

(の前にimport "@babel/polyfill"も試してはみました。。)

json

1// package.json 2"devDependencies": { 3 "@babel/core": "^7.4.5", 4 "@babel/preset-env": "^7.4.5", 5 "babel-loader": "^8.0.6", 6 "core-js": "^3.1.2", 7 "regenerator-runtime": "^0.13.2", 8 "body-scroll-lock": "^2.6.4", 9 "css-loader": "^3.4.0", 10 "file-loader": "^5.0.2", 11 "gulp": "^4.0.2", 12 "gulp-autoprefixer": "^7.0.1", 13 "gulp-clean-css": "^4.2.0", 14 "gulp-notify": "^3.2.0", 15 "gulp-plumber": "^1.2.1", 16 "gulp-sass": "^4.0.2", 17 "gulp-sourcemaps": "^2.6.5", 18 "hooper": "^0.3.4", 19 "url-loader": "^3.0.0", 20 "vue-click-outside": "^1.0.7", 21 "vue-loader": "^15.8.3", 22 "vue-style-loader": "^4.1.2", 23 "vue-swatches": "^1.0.4", 24 "vue-template-compiler": "^2.6.11", 25 "webpack": "^4.41.6", 26 "webpack-stream": "^5.2.1", 27 "vue": "^2.6.11" 28 }

javascript

1//gulpfile.js 2gulp.task('bundle', function () { 3 return gulp.src([paths.entry]) 4 .pipe(plumber()) 5 .pipe(webpackStream({ 6 output: { 7 filename: './bundle.js', 8 }, 9 module: { 10 rules: [ 11 { 12 test: /.vue$/, 13 loader: 'vue-loader', 14 options: { 15 options: { 16 presets: [ 17 'es2015', 18 { 19 targets: { 20 browsers: ['last 2 versions', 'safari 7', 'edge 14', 'ie 11'], 21 }, 22 }, 23 ], 24 }, 25 }, 26 }, 27 { 28 test: /.js$/, 29 resourceQuery: paths.js + 'src/', 30 loader: 'babel-loader', 31 options: { 32 presets: [ 33 'es2015', 34 { 35 targets: { 36 browsers: ['last 2 versions', 'safari 7', 'edge 14', 'ie 11'], 37 }, 38 }, 39 ], 40 } 41 }, 42 { 43 test: /.css$/, 44 oneOf: [ 45 { 46 resourceQuery: /module/, 47 use: [ 48 'vue-style-loader', 49 { 50 loader: 'css-loader', 51 options: { 52 modules: true, 53 localIdentName: '[local]_[hash:base64:5]', 54 }, 55 }, 56 ], 57 }, 58 { 59 use: ['vue-style-loader', 'css-loader'], 60 }, 61 ], 62 }, 63 { 64 test: /.(png|jpe?g|gif)$/i, 65 use: [ 66 { 67 loader: 'file-loader', 68 options: { 69 name: '[name].[ext]', 70 outputPath: '../images/compile/', 71 publicPath: '../assets/images/compile/', 72 esModule: false, 73 }, 74 }, 75 ], 76 }, 77 ], 78 }, 79 resolve: { 80 extensions: ['.js', '.vue'], 81 modules: [ 82 "node_modules" 83 ], 84 alias: { 85 86 } 87 }, 88 plugins: [ 89 new webpack.DefinePlugin({ 90 'process.env': { 91 NODE_ENV: '"production"' 92 } 93 }), 94 new webpack.optimize.AggressiveMergingPlugin(), 95 new webpack.ProvidePlugin({ 96 jQuery: "jquery", 97 $: "jquery", 98 jquery: "jquery" 99 }), 100 new VueLoaderPlugin(), 101 ] 102 }, null, function (err, stats) { 103 if (stats.compilation.errors.length) { 104 notify.onError({ 105 title: 'Webpack error', 106 message: stats.compilation.errors[0].error, 107 sound: 'Frog', 108 }); 109 } 110 })) 111 .pipe(gulp.dest(paths.js)) 112 .pipe(notify("Bundle JS Success!")); 113});

html側でv-cloak(css:display: none;)を指定しており、これを削除するとページ自体は表示されるのですが、モーダルなどが表示されてしまいjavascriptが無効になってしまっています。

コンソールを見てもエラーも表示されず、どこが悪いのかわかりません。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。

guest

回答1

0

自己解決

babel.config.jsの useBuiltIns" 'usage'のところをuseBuiltIns: 'entry'に変更すればエラーが表示されるようになり、構文を一つずつ直していったところ無事に表示されました。

javascript

1module.exports = function (api) { 2 api.cache(true); 3 4 const presets = [["@babel/preset-env", { 5 useBuiltIns: "entry", 6 corejs: 3, 7 }]]; 8 9 return { 10 presets, 11 }; 12} 13

投稿2020/02/29 04:14

nana7777

総合スコア7

下記のような回答は推奨されていません。

  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.68%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

同じタグがついた質問を見る

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Babel

Babelは、JavaScriptの次世代仕様であるECMAScriptのコンパイラ。次世代の標準機能を用いて記述されたコードを、それらの機能に対応していないブラウザでも動作するコードに変換することができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

gulp

gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。