10. babel 基本使用

为什么需要babel？ ES6+ 的语法、TypeScript、React 项目 JSX 都是离不开 Babel 的。 Babel是一个 工具链 ，主要用于旧浏览器或者环境中将ECMAScript 2015+代码转换为向后兼容版本的JavaScript

Babel命令行使用 

        babel本身可以作为一个独立的工具 （和postcss一样），不和webpack等构建工具配置来单独使用。 安装： npm install @babel/cli @babel/core -D 使用： npx babel src --out-dir dist 插件的使用 npm install @babel/plugin-transform-arrow-functions -D npx babel src --out-dir dist --plugins=@babel/plugin-transform-arrow-functions npm install @babel/plugin-transform-block-scoping -D npx babel src --out-dir dist --plugins=@babel/plugin-transform-block-scoping ,@babel/plugin-transform-arrow-functions （ 箭头函数 & const 转换 var ） Babel的预设preset         如果要转换的内容过多，一个个设置是比较麻烦的，可以使用预设（preset） 安装@babel/preset-env预设。 npm install @babel/preset-env -D 执行： npx babel src --out-dir dist --presets=@babel/preset-env webpack 中使用 babel  安装： npm install babel-loader -D

webpack 中使用 babel-preset 

安装： npm install @babel/preset-env

1. 定义 Babel 配置文件

module.exports = {presets: ["@babel/preset-env"],
 };
 

const path = require("path");module.exports = {entry: "./src/main.js",output: {path: path.resolve(__dirname, "dist"),filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中clean: true, // 自动将上次打包目录资源清空},module: {rules: [{test: /.js$/,exclude: /node_modules/, // 排除node_modules代码不编译loader: "babel-loader",},],}mode: "development",
 };
 

npx webpack

打包后的 dist/static/js/main.js 文件查看，会发现箭头函数等 ES6 语法已经转换了。