babelrc是Babel的配置文件。它允許我們自定義Babel的工作方式,其中包括哪些轉換器使用、文件應該被包括、哪些平臺應該被支持,等等。如果您已經在使用Vue,那么您需要了解的是Vue CLI的默認Babel配置已經為您設置了一個babel.config.js文件。
對于Vue項目而言,Babel官方推薦安裝@babel/preset-env和@vue/cli-plugin-babel。在babel.config.js文件中,加入以下代碼:
module.exports = { presets: [ '@vue/cli-plugin-babel/preset', ['@babel/preset-env', { modules: false, useBuiltIns: 'usage', corejs: 3 }] ] }
這個配置文件中,@vue/cli-plugin-babel/preset使Babel能夠正確地轉換Vue文件。@babel/preset-env則負責轉換JavaScript代碼以兼容特定的瀏覽器版本。上述配置文件設置了modules為false,因為Vue CLI默認會為您處理模塊并自動生成ES modules。useBuiltIns啟用了自動按需加載所需的Polyfill,而不是手動導入所有功能。最后的corejs選項指定應使用哪個Core.js版本。
Babel配置文件是可以自己創建和修改的。但基本的規則是,Babel只能轉換JavaScript,而且不會嘗試轉換任何Vue特定的結構。如果您使用了屬性/實例方法、組件選項等,則Babel不會對其進行任何修改。這些僅用于Vue本身的執行過程,而Babel旨在轉換JavaScript代碼以使其兼容任何瀏覽器。