版本說明：
Vue版本：@vue/cli 4.4.6
webpack版本：4.41.1
node版本：v11.12.0
項目需要優(yōu)化首頁加載速度，所以需要把全局引入改為局部引入挪拟，百度加上自己的摸索挨务，最后修改成功，記錄一下玉组，希望能夠?qū)e人有點(diǎn)啟發(fā)：
1谎柄、安裝 babel-plugin-component：
npm install babel-plugin-component -D
2、創(chuàng)建一個文件惯雳，里面是我們需要的組件
import {
Link,
Divider,
} from 'element-ui'
const element = {
install: function(Vue) {
Vue.use(Link);
Vue.use(Divider);
}
}
export default element
3朝巫、在main.js中把該文件引入
import element from './elementPartUI'
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(element)
4、修改babel.config.js
百度很多資料都是直接修改.babel文件石景，但是項目中并沒有該文件劈猿，我還嘗試手動創(chuàng)建該文件，但是項目報錯潮孽，此路不通揪荣。
至此，成功轉(zhuǎn)為局部引入恩商。变逃。必逆。
但是我發(fā)現(xiàn)有一個babel.config.js文件怠堪，于是乎上網(wǎng)百度發(fā)現(xiàn)修改該文件也可以配置局部引入，粘上代碼：
module.exports = {
presets: [
'@vue/app', [
'@babel/preset-env', {
modules: false
}
]
],
plugins: [
[
'component',
{
'libraryName': 'element-ui',
'styleLibraryName': 'theme-chalk'
}
]
]
};
但是babel.config.js文件和 .babel文件到底有什么區(qū)別呢名眉？
Babel 有兩種并行的配置文件格式粟矿，可以一起使用，也可以分開使用损拢。
- 項目范圍的配置
babel.config.js 文件陌粹，具有不同的拓展名（json、js福压、html）
babel.config.js 是按照 commonjs 導(dǎo)出對象掏秩，可以寫js的邏輯或舞。
- 相對文件的配置
.babelrc 文件，具有不同的拓展名
總結(jié)：baberc 的加載規(guī)則是按目錄加載的蒙幻，是只針對自己的代碼映凳。config的配置針對了第三方的組件和自己的代碼內(nèi)容。babel.config.js 是一個項目級別的配置邮破，一般有了babel.config.js 就不會在去執(zhí)行.babelrc的設(shè)置诈豌。
中文文檔鏈接：https://www.babeljs.cn/
注意： .babelrc 和 .babel.config.js
兩個文件都是es6語法編譯配置，用來將es6代碼轉(zhuǎn)換成瀏覽器能夠識別的es5代碼抒和。
<meta charset="utf-8">
<meta charset="utf-8">
Babel的配置文件就是.babelrc矫渔，存放在根目錄下。使用Babel的第一步摧莽，就是配置這個文件庙洼。
該文件是用來設(shè)置轉(zhuǎn)碼規(guī)則和插件的 ：
- {
- "presets":[],
- "plugins":[]
- }
presets 字段設(shè)定轉(zhuǎn)碼規(guī)則，官方提供镊辕，根據(jù)需要安裝送膳。
然后，將這些規(guī)則加入 .babelrc中丑蛤。
當(dāng)按需加載組件的時候叠聋，babel-plugin-component 。如果兩個文件同時配置受裹，并沒有生效碌补。原因就是配置無法合并，
導(dǎo)致文件無效棉饶。解決辦法：把配置放入同一個文件厦章，刪除另一個，只保留.babelrc就可以了照藻。
