一、vue-cli创建babel
1、在用脚手架创建项目时，可以选择babel直接创建
一般情况下是默认配置，直接使用就可以了
二、单独引入babel(直接修改package.json)
1、我们在创建vue项目时候，没有用脚手架生成babel
在dependencies内引入
// 引入的插件
core-js，
//core-js 是 babel-polyfill 的底层依赖，通过各种奇技淫巧，用 ES3 实现了大部分的 ES2017 原生标准库，同时还要严格遵循规范。
//core-js 是在package.json下的dependencies内，如下图
在这里插入图片描述
2、babel相关配置
在devDependencies内引入
@vue/cli-plugin-babel
@vue/cli-plugin-eslint
babel-eslint
eslint
eslint-plugin-vue
在这里插入图片描述
3、babel.config配置
项目根目录下创建babel.config.js，下面是配置
1
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}
4、eslint配置
项目根目录下创建.eslintrc.js，记得文件名第一个字符是点
1
module.exports = {
root: true,
env: {
node: true
},
'extends': [
'plugin:vue/essential',
'eslint:recommended'
],
parserOptions: {
parser: 'babel-eslint'
},
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
}
}
5、vue.config配置
项目根目录下创建vue.config.js,配置config关闭代码检测规范。
并且配置关闭打包生成map文件，如果不生成map文件，打包体积会缩小50%。亲测
module.exports = {
lintOnSave: false,//代码检测规范，false为关闭
productionSourceMap: false,//打包不生成map文件
};
三、配置完成
关键步骤，记得删除node_modules文件夹，重新npm i即可。
很多小伙伴没有删除node_modules，会导致部分报错，删除重新打包就不会报错了
1、bable会识别process.env.NODE_ENV 是否等等 production。
在不同环境下打包出来的效果是不一样的，例如测试环境可能就只打包一个app.js，而正式环境是多个js文件
开发环境与测试环境打包出来的东西也不一样
2、第一次改版上线前最好在与正式服务器环境相同服务器上多测试几遍。
重要事情说三遍：！不要只测试开发环境和测试环境。
！不要只测试开发环境和测试环境。
！不要只测试开发环境和测试环境。
3、其他配置可以自己去bable官网学习后自己配置。我这些只是简单的配置
四、效果对比
1、生成map文件配置的打包效果，且没有使用babel，可以看到是5M多，且没有生成css文件夹
2、不生成map配置，且用babel配置后打包。可以清晰地看到新增了一个css文件夹，并且打包后大小只有不到之前的一半
