版本說(shuō)明：

Vue版本：@vue/cli 4.4.6

webpack版本：4.41.1

node版本：v11.12.0

項(xiàng)目需要優(yōu)化首頁(yè)加載速度，所以需要把全局引入改為局部引入，百度加上自己的摸索，最后修改成功，記錄一下，希望能夠?qū)e人有點(diǎn)啟發(fā)：

1、安裝 babel-plugin-component：

npm install babel-plugin-component -D

2、創(chuàng)建一個(gè)文件，里面是我們需要的組件

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文件，但是項(xiàng)目中并沒(méi)有該文件，我還嘗試手動(dòng)創(chuàng)建該文件，但是項(xiàng)目報(bào)錯(cuò)，此路不通。

至此，成功轉(zhuǎn)為局部引入。。。

但是我發(fā)現(xiàn)有一個(gè)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 有兩種并行的配置文件格式，可以一起使用，也可以分開使用。

1. 項(xiàng)目范圍的配置

babel.config.js 文件，具有不同的拓展名（json、js、html）

babel.config.js 是按照 commonjs 導(dǎo)出對(duì)象，可以寫js的邏輯。

2. 相對(duì)文件的配置

.babelrc 文件，具有不同的拓展名

總結(jié)：baberc 的加載規(guī)則是按目錄加載的，是只針對(duì)自己的代碼。config的配置針對(duì)了第三方的組件和自己的代碼內(nèi)容。babel.config.js 是一個(gè)項(xiàng)目級(jí)別的配置，一般有了babel.config.js 就不會(huì)在去執(zhí)行.babelrc的設(shè)置。

中文文檔鏈接：https://www.babeljs.cn/

注意： .babelrc 和 .babel.config.js

兩個(gè)文件都是es6語(yǔ)法編譯配置，用來(lái)將es6代碼轉(zhuǎn)換成瀏覽器能夠識(shí)別的es5代碼。

<meta charset="utf-8">

<meta charset="utf-8">

image.png

Babel的配置文件就是.babelrc，存放在根目錄下。使用Babel的第一步，就是配置這個(gè)文件。

該文件是用來(lái)設(shè)置轉(zhuǎn)碼規(guī)則和插件的 ：

1. {
2. "presets":[],
3. "plugins":[]
4. }

presets 字段設(shè)定轉(zhuǎn)碼規(guī)則，官方提供，根據(jù)需要安裝。

image.png

然后，將這些規(guī)則加入 .babelrc中。

image.png

當(dāng)按需加載組件的時(shí)候，babel-plugin-component 。如果兩個(gè)文件同時(shí)配置，并沒(méi)有生效。原因就是配置無(wú)法合并，

導(dǎo)致文件無(wú)效。解決辦法：把配置放入同一個(gè)文件，刪除另一個(gè)，只保留.babelrc就可以了。