最近用next写了一个官网页面,谷歌没问题,但是用IE打开后页面一片空白,初步猜测应该是没有配置babel和polyfill,今天就尝试自己配置并学习了一下:
babel中文文档
安装polyfill:
npm install --save @babel/polyfill
在_app.tsx 中引入:
import '@babel/polyfill';
安装babel:
// 处理JSX语言
npm i @babel/core babel-loader @babel/preset-env @babel/preset-react -D
// 处理ES6语言
npm i @babel/plugin-transform-runtime -D
npm i @babel/runtime -S
新建.babelrc, 就好了
{
"presets": [
[
"@babel/env",
{
"modules": "commonjs"
}
]
],
"plugins": [
"@babel/transform-react-jsx",
"@babel/transform-runtime"
]
}
next.config.js配置
rules: [
{test: /\.(js|jsx)$/, use: 'babel-loader', exclude: /node_modules/},
],
experimental: {
forceSwcTransforms: true,
},