vue-cli3.x配置babel转换node-modules中的安装包

首先我们先了解一些跟babel相关的基础知识，了解什么是babel，如何配置babel等等

什么是babel？

babel官网介绍戳戳戳：https://www.babeljs.cn/docs/

Babel 是一个 JavaScript 编译器，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。

啊哦哦~~原来是这样，babel就是将高版本的新语法转换成能在各个浏览器中兼容的语法，这样就不会担心浏览器的兼容性而不使用新语法喽！！

vue-cli2.x版本项目如何配置babel转换

@babel/core：babel的核心库

必引，一切babel转换操作都基于@babel/core，因为它包含了编译的transform方法

npm install --save-dev @babel/core

@babel/polyfill：用于模拟完整的 ES2015+ 环境

注意是--save而非--save-dev，因为这是一个需要在你的源码之前运行的 polyfill

npm install --save @babel/polyfill

安装之后，在项目入口main.js引入@babel/polyfill即可

babel-loader：webpack配置loader转换

babel-loader网址戳戳戳：https://www.webpackjs.com/loaders/babel-loader/
允许使用Babel和webpack来转译JavaScript文件

npm install --save-dev babel-loader

webpack.base.config.js文件中配置

module.exports = {
      module: {
            rules: [
                  {
                       test: /\.js$/,
                       loader: 'babel-loader',
                       include: [resolve('src')]
                  }
            ]
      }
}

通过以上配置即可达到在vue-cli2.x版本进行babel转换

vue-cli3.x版本该怎么做呢

vue-cli3.x的项目初始化时会引入一个插件，名为@vue/cli-plugin-babel

@vue/cli-plugin-babel：默认已引入

默认使用 Babel 7 + babel-loader + @vue/babel-preset-app，也就是无需再单独引入babel-loader等转换插件了
首先看一下vue-cli3.x版本的介绍介绍：

Babel配置.png

@vue/babel-preset-app：默认已引入

在babel.config.js文件中进行配置，更多详情配置请去官网哦~

module.exports = {
    presets: [
        '@vue/babel-preset-app'
    ]
};

此时，运行项目，即可进行babel转换
是不是很酷只需要配置presets即可

请注意请注意
默认情况下，babel-loader会忽略所有 node_modules 中的文件，但是我们在某一些安装包引入的时候也需要进行babel转换，那怎么办呢

transpileDependencies：转换node-modules必备

transpileDependencies介绍.png

在vue.config.js文件中配置：

module.exports = {
    transpileDependencies: [
        /[/\\]node_modules[/\\]test[/\\]/,
        /[/\\]node_modules[/\\][@\\]test2[/\\]test3[/\\]/,
    ]
}

哇喔~~~运行一下，不报错了，node-modules文件下的也可以进行babel转换了哟

自己爬坑的一个记录哟，不对之处请指正~~蟹蟹