webpack5 使用babel和core-js实现polyfill
1.克隆一份webpack5创建前端代码
npm install --save-dev typescript @babel/core @babel/cli @babel/plugin-proposal-class-properties @babel/preset-env @babel/preset-typescript
tsc --init --declaration --allowSyntheticDefaultImports --target esnext --outDir lib{
"presets": [
[
"@babel/preset-env",
{
"targets": {
"edge": "17",
"firefox": "60",
"chrome": "67",
"safari": "11.1",
"ie": "8"
}
}
],
"@babel/preset-typescript"
],
"plugins": [
"@babel/plugin-proposal-class-properties"
]
} // {
// test: /\.tsx?$/,
// use: 'ts-loader',
// exclude: /node_modules/,
// }, {
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
}, {
test: /\.(ts|js)x?$/,
exclude: /node_modules/,
loader: 'babel-loader',
},// Promise调用
add(1, 2)
.then((res) => {
console.log(res, 'add');
});
const defaults = {
fontSize: '10px',
}
// 扩展运算符
const styles = {
...defaults,
color: "#f5da55",
};
console.log(styles);
// 模板字符串
const textDom = document.querySelector("#text");
textDom?.setAttribute('style',`color:${styles.color}; font-size:${styles.fontSize}`);
- 此时在google浏览器调试环境和生产环境都可以正常打印和展示；
- 在ie中，测试环境，生产环境都会报错，生产环境错误提示为:
npm i core-js -D
{
"presets": [
[
"@babel/preset-env",
{
"useBuiltIns": "usage",
"corejs": {
//core-js的版本
"version": 3
},
"targets": {
"edge": "17",
"firefox": "60",
"chrome": "67",
"safari": "11.1",
"ie": "8"
}
}
],
"@babel/preset-typescript"
],
"plugins": [
"@babel/plugin-proposal-class-properties"
]
}
- 此时在ie中生产环境能正常打印，有些样式显示不对不在本次处理;
- 调试环境没有使用babel,所以会报
