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)

"plugins": ["transform-vue-jsx", "transform-runtime"]

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

指定项目开发和生成环境中需要使用的依赖库