Saya sedang membangun situs statis dengan templat nuxt vuetify dan meskipun templatnya mengagumkan dan menyediakan begitu banyak konfigurasi dan pengaturan yang telah dilakukan untuk saya, saya merasa sangat sulit untuk membuat situs saya berjalan lancar di Internet Explorer (11).
Karena kode ES6 perlu ditranspilasi, saya mencoba mengonfigurasi babel di aplikasi saya, dan ini adalah pengalaman pertama saya mengonfigurasi babel (jadi, abaikan kurangnya pengetahuan saya di domain). ada begitu banyak masalah/pertanyaan di internet, dan saya sudah mencoba hampir semuanya tetapi sia-sia.
TL;DR, saya menggunakan Nuxt 2.x (dan Webpack 4, secara internal), saya tidak tahu di mana dan bagaimana cara memasukkan @babel/polyfill
karena,
kami tidak memiliki titik masuk yang jelas atau eksplisit di aplikasi Nuxt, tempat saya dapat mengimpor file tersebut
import '@babel.polyfill'
, seperti yang dinyatakan di sejumlah tempat, termasuk dokumentasi resmi babelwebpack 4 juga tidak memiliki bidang
entry.vendor
, tempat saya dapat memasukkan polyfill tersebut.
inilah nuxt.config.js saya:
babel: {
presets: [
['@babel/preset-env', {
'useBuiltIns': 'usage',
'targets': '> 0.25%, not dead'
}]
],
plugins: ['@babel/plugin-syntax-dynamic-import', [
'@babel/plugin-transform-runtime',
{
'corejs': false,
'helpers': true,
'regenerator': true,
'useESModules': false
}
]],
'configFile': false,
'babelrc': false
}
berikut adalah versi paket yang saya gunakan:
"dependencies": {
"@babel/polyfill": "^7.2.5"
}
"devDependencies": {
"@babel/core": "^7.2.2",
"@babel/plugin-transform-runtime": "^7.2.0",
"@babel/preset-env": "^7.2.3",
"@babel/runtime-corejs2": "^7.3.0",
"babel-core": "^6.26.3",
"babel-eslint": "^10.0.1",
"babel-loader": "^8.0.5",
"babel-plugin-dynamic-import-node": "^2.2.0"
}
mengikuti utas ini, saya juga berpikir untuk memasukkan babel polyfill
sebagai vendor ke objek entri webpack tetapi memberi saya kesalahan: Cannot set property 'vendor' of undefined
karena, tampaknya, konfigurasi webpack 4 tidak memiliki bidang entri, seperti yang dulu dimiliki webpack 3.
ini adalah konfigurasi webapack saya:
{
name: 'client',
mode: 'production',
devtool: false,
optimization:
{ runtimeChunk: 'single',
minimize: true,
minimizer: undefined,
splitChunks:
{ chunks: 'all',
automaticNameDelimiter: '.',
name: undefined,
cacheGroups: [Object] } },
output:
{ path: '/home/waleed/project/.nuxt/dist/client',
filename: '[chunkhash].js',
chunkFilename: '[chunkhash].js',
publicPath: '/_nuxt/' },
performance: { maxEntrypointSize: 1024000, hints: 'warning' },
resolve:
{ extensions: [ '.wasm', '.mjs', '.js', '.json', '.vue', '.jsx' ],
alias:
{ '~': '/home/waleed/project',
'~~': '/home/waleed/project',
'@': '/home/waleed/project',
'@@': '/home/waleed/project',
assets: '/home/waleed/project/assets',
static: '/home/waleed/project/static' },
modules:
[ 'node_modules',
'/home/waleed/projectnode_modules',
'/home/waleed/project/node_modules/@nuxt/config/node_modules' ] },
resolveLoader:
{ modules:
[ 'node_modules',
'/home/waleed/project/node_modules',
'/home/waleed/project/node_modules/@nuxt/config/node_modules' ] },
module:
{ rules:
[ [Object],
[Object],
[Object],
[Object],
[Object],
[Object],
[Object],
[Object],
[Object],
[Object],
[Object] ] },
plugins:
[ VueLoaderPlugin {},
WarnFixPlugin {},
WebpackBarPlugin {
profile: false,
handler: [Function],
modulesCount: 500,
showEntries: false,
showModules: true,
showActiveModules: true,
options: [Object],
reporters: [Array] },
MiniCssExtractPlugin { options: [Object] },
HtmlWebpackPlugin { options: [Object] },
HtmlWebpackPlugin { options: [Object] },
VueSSRClientPlugin { options: [Object] },
DefinePlugin { definitions: [Object] } ]
}
P.S: Saya sudah melihat dan mencoba pertanyaan ini , dan itu pasti berhasil juga, tetapi kasus penggunaan saya menuntut untuk tidak menggunakan polyfill.io.