小白入门（webpack处理js资源2）

回顾上章节的内容，本期承接上一章节，进行第二步，讲述babel内容！

第一步：了解babel

babel简易来讲其实一个javascript编译器，主要用处就是讲ES6语法转换成向后兼容的 javascript 语法，以便运行在当前与旧版本或其他环境中

第二步：babel使用

首先，打开官网，我们要下载babel-loader

在之前我们下载过webpack，所以我们在终端中不用跟官网一样再下载一次

终端中写入：

npm install -D babel-loader @babel/core @babel/preset-env

 之后，在配置文件中写入

{
       test: /\.m?js$/,
       exclude: /node_modules/, //排除node_modules中的js文件，这些不处理，因为这都是第三方下载的包已经处理好了，不需要重复操作。
       use: {
          loader: 'babel-loader',
          //options: {
              //第一种方法，优点：方便
             // presets: ['@babel/preset-env']  //预设
          //}
       }
}

 我们先了解一下预设是什么:

简单来讲：就是Babel的插件，扩展Babel功能

@babel/preset-env ：   一个智能预设，允许您使用最新的 JavaScript

@babel/preset-react：    一个用来编译 Reactisx 语法的预设

@babel/preset-typescript：    一个用来编译TypeScript 语法的预设 

 我们写预设还有第二种方法，在根目录中，创建babel的配置文件

在里面写入以下代码

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

优点是：这样可以将来可以直接修改我们的配置。

我们做一个测试

现在src/js文件夹中创建一个sum.js文件，写入

export default function sum(...args) {
    return args.reduce((p,c)=>p+c,0);
}

记得在main.js导入

我们重新打包webpack

我们查看打包后的dist/static/js下的main.js文件，找到sum的打包后的代码

可以看出，代码跟我们写的不一样，通过bebel的配置与智能预设，它已经把我们的代码转换成之前的语法格式。

以上就是babel的基本用法了！

新来的小伙伴记得看我的专栏，从前往后看，谢谢大家支持！

友友们，关注收藏支持一下