vue項目結構及檔案介紹(1) —— 外層檔案.babelrc .editorconfig .postcssrc.js package.json

項目一級檔案夾如下：

首先介紹外層檔案：

（1）.babelrc檔案

es6特性浏覽器還沒有全部支援，但是使用es6是大勢所趨，是以babel應運而生，用來将es6代碼轉換成浏覽器能夠識别的代碼，用來相容絕大多數的主流浏覽器。在項目工程腳手架中，一般會使用.babelrc檔案，通過配置一些參數配合webpack進行打包壓縮。

plugins

該屬性是告訴babel要使用那些插件，這些插件可以控制如何轉換代碼

Babel預設隻轉換新的javascript文法，而不轉換新的API,比如Proxy,Promise 等全局對象,以及有些在全局對象上的方法(比如 Object.assign)

babel-runtime

它是将es6編譯成es5去執行,不管浏覽器是否支援ES6，隻要是ES6的文法，它都會進行轉碼成ES5.是以就有很多備援的代碼,使用的時候在對應的檔案中import需要的方法

babel-plugin-transform-runtime

幫助我們避免手動引入 import的痛苦，并且它還做了公用方法的抽離

presets

presets屬性告訴Babel要轉換的源碼使用了哪些新的文法特性，presets是一組Plugins的集合。

babel-preset-env

的功能類似于 babel-preset-latest，它會根據

目标環境

選擇不支援的新特性來轉譯

首先需要在項目中安裝，如下指令

npm install babel-preset-env --save-dev

然後在.bablerc檔案配置

"presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
           

如上目标環境為:

超過市場佔有率1%的浏覽器，且支援每個浏覽器最後兩個版本和ie不小于等于8版本所需的polyfill代碼轉換

參考自：https://www.cnblogs.com/tugenhua0707/p/9452471.html

（2）.editorconfig

描述：配置檔案以及編碼等資訊，代碼的規範檔案，規定使用空格或 tab 縮進，縮進的長度是兩位還是四位之類的代碼風格，使用的話需要在編輯器裡下載下傳對應的插件；

（3）.gitignore

（4）.postcssrc.js

指定使用的 css 預編譯器，裡面預設配置了 autoprefixer ，自動補全浏覽器字首；

（5）favicon.ico

浏覽器标簽頁 title 旁邊的小圖示，這是需要我們自己粘貼過來的；

（6）package-lock.json

當 node_modules 或 package.json 發生變化時自動生成的檔案。這個檔案主要功能是确定目前安裝的包的依賴，以便後續重新安裝的時候生成相同的依賴，而忽略項目開發過程中有些依賴已經發生的更新；

（7）package.json

指定項目開發和生成環境中需要使用的依賴庫