问题描述
我正在将Webpack与Babel一起使用，并且@babel/preset-env希望仅导入我需要的所需polyfill。似乎整个库都已安装，导致捆绑包很大（〜250kb）
我的package.js：
{
"name": "holidaynewtheme","version": "0.1","description": "Starter theme for holidaynewbase","private": true,"main": "webpack.config.js","dependencies": {
"core-js": "^3.6.5","element-closest": "^3.0.2","flickity": "^2.2.1","gsap": "^3.4.2","js-cookie": "^2.2.1","turbolinks": "^5.2.0","vanilla-lazyload": "^17.1.0","whatwg-fetch": "^3.4.0"
},"devDependencies": {
"@babel/core": "^7.11.0","@babel/plugin-transform-runtime": "^7.8.3","@babel/preset-env": "^7.8.4","@babel/runtime": "^7.8.4","@shopify/theme-cart": "^3.0.3","@shopify/theme-product": "^3.0.3","@shopify/theme-product-form": "^3.0.3","@shopify/themekit": "^1.1.3","autoprefixer": "^9.7.4","babel-loader": "^8.0.6","bluebird": "^3.5.3","copy-webpack-plugin": "^5.1.1","cross-env": "^7.0.2","css-loader": "^3.4.2","eslint": "^6.8.0","file-loader": "^3.0.1","glob": "^7.1.6","html-includes": "^4.3.3","mini-css-extract-plugin": "^0.9.0","modernizr": "^3.6.0","modernizr-loader": "^1.0.1","node-sass": "^4.13.1","postcss-loader": "^3.0.0","pre-commit": "^1.2.2","sass-loader": "^8.0.2","svg-symbols": "^1.0.5","url-loader": "^1.1.2","webpack": "^4.41.6","webpack-bundle-analyzer": "^3.8.0","webpack-cli": "^3.3.11","webpack-shell-plugin-next": "^1.1.5"
},"browserslist": [
"last 1 version","> 2%","Explorer >= 11"
]
}
我的babel.config.json：
{
"presets": [
[
"@babel/preset-env",{
useBuiltIns: "entry",debug: true,corejs: "3.6.4"
}
]
],"plugins": [
"@babel/plugin-transform-runtime"
]
}
我在主要入口处设置了以下导入：
import 'core-js/stable';
import 'regenerator-runtime/runtime';
我正在使用BundleAnalyzerPlugin，仅核心js的压缩大小为250kb：
当我将browserslist设置更改为Chrome 85时，不会导入任何形式的core-js。
解决方法
好的，感觉很愚蠢。
我的webpack.config.js具有babel-loader的配置：
{
test: /\.js$/,exclude: /node_modules/,loader: 'babel-loader',query: {
presets: ['@babel/env'],}
}, ...我对webpack的设置不是很满意，所以我认为这覆盖了我的babel.config.json中的任何.js。
此外，我删除了导入行，并将useBuiltIns更改为usage，一切正常。
赠品应该是因为我的debug: true并未导致在编译Webpack时记录调试信息。现在，我的包很小了。