记录前端项目打包过程遇到的问题(持续记录)

287 阅读1分钟

webpack

  • 运行 npm run devyarn run dev时,提示以下内容

[webpack-dev-server] Unable to open "http://localhost:8080/" page. If you are running in a headless environment, please do not use the "open" option or related flags like "--open", "--open-target", and "--open-app".

后果

不会自动在浏览器打开项目

包版本

"devDependencies": {
  "webpack": "^5.71.0",
  "webpack-cli": "^4.9.2",
  "webpack-dev-server": "^4.9.0"
  // 其他包
},

原因

腾讯管家、360卫士之类的杀毒软件将 powershell.exe 禁了

image.png

解决方案

powershell.exe添加到信任区

image.png

babel

  • 在配置中使用 useBuiltIns ,提示以下内容

WARNING (@babel/preset-env): We noticed you're using the useBuiltIns option without declaring a core-js version. Currently, we assume version 2.x when no version is passed. Since this default version will likely change in future versions of Babel, we recommend explicitly setting the core-js version you are using via the corejs option.

包版本

"devDependencies": {
  "@babel/core": "^7.18.6",
  "@babel/preset-env": "^7.18.6",
  "babel-loader": "^8.2.5",
  // 其他包
},
"dependencies": {
  "core-js": "3",
  // 其他包
},

babelrc

{
   "presets": [
    ["@babel/preset-env", {
        "targets": "> 1%, not dead",
        "useBuiltIns": "usage"
    }]
   ]
}

原因

配置文件中没加 corejs

解决方案

babelrc加上corejs属性,如下

{
   "presets": [
    ["@babel/preset-env", {
        "corejs": "3.0.0", // 加入该属性
        // 其他属性
    }]
   ]
}