webpack5学习前言_2配置webpack环境(配置babel)

本文链接：https://blog.csdn.net/l1134/article/details/126125156

一、为什么要配置 babel ?
ES6标准发布后，module成为标准，标准的使用是以export指令导出接口，以import引入模块。但因为一些历史原因，虽然 Node.js 已经实现了99%的ES6新特性，采用的却是 CommonJS 规范，使用 require 引入模块，使用module.exports导出接口。为了能让 Node.js 能够正常运行ES6等高级语法，所以需要使用 babel 来进行调用。
无法识别ES6语法，如下图所示：

二、使用前，需要安装依赖：
1、全局安装 babel-cli
命令：

npm install babel-cli -g

2、安装 babel-preset-env
命令：

npm install babel-preset-env -D

三、修改 package.json 文件

{
  "name": "package_4",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "babel-node --presets env ./src/main.js"
  },
  "keywords": [],
  "author": "linjy",
  "license": "ISC",
  "devDependencies": {
    "babel-preset-env": "^1.7.0",
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0"
  }
}