vue-cli腳手架每行註釋--摘抄

 

.babelrc文件

{

  // 此項指明，轉碼的規則

  "presets": [

      // env項是藉助插件babel-preset-env，下面這個配置說的是babel對es6,es7,es8進行轉碼，而且設置amd,commonjs這樣的模塊化文件，不進行轉碼

      ["env", { "modules": false }],

      // 下面這個是不一樣階段出現的es語法，包含不一樣的轉碼插件

      "stage-2"

  ],

  // 下面這個選項是引用插件來處理代碼的轉換，transform-runtime用來處理全局函數和優化babel編譯

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

  // 下面指的是在生成的文件中，不產生註釋

  "comments": false,

  // 下面這段是在特定的環境中所執行的轉碼規則，當環境變量是下面的test就會覆蓋上面的設置

  "env": {

      // test 是提早設置的環境變量，若是沒有設置BABEL_ENV則使用NODE_ENV，若是都沒有設置默認就是development

      "test": {

          "presets": ["env", "stage-2"],

          // instanbul是一個用來測試轉碼後代碼的工具

          "plugins": ["istanbul"]

      }

  }

}

 

vue-cli build目錄中的 utils.js 配置文件

此配置文件是vue開發環境的wepack相關配置文件，主要用來處理css-loader和vue-style-loader

// 引入nodejs路徑模塊

var path = require('path')

// 引入config目錄下的index.js配置文件

var config = require('../config')

// 引入extract-text-webpack-plugin插件，用來將css提取到單獨的css文件中

// 詳情請看(1)

var ExtractTextPlugin = require('extract-text-webpack-plugin')

// exports其實就是一個對象，用來導出方法的最終仍是使用module.exports，此處導出assetsPath

exports.assetsPath = function (_path) {

    // 若是是生產環境assetsSubDirectory就是'static'，不然仍是'static'，

    var assetsSubDirectory = process.env.NODE_ENV === 'production'

        ? config.build.assetsSubDirectory

        : config.dev.assetsSubDirectory

    // path.join和path.posix.join的區別就是，前者返回的是完整的路徑，後者返回的是完整路徑的相對根路徑

    // 也就是說path.join的路徑是C:a/a/b/xiangmu/b，那麼path.posix.join就是b

    return path.posix.join(assetsSubDirectory, _path)

    // 因此這個方法的做用就是返回一個乾淨的相對根路徑

}

 

// 下面是導出cssLoaders的相關配置

exports.cssLoaders = function (options) {

  // options若是沒值就是空對象

  options = options || {}

  // cssLoader的基本配置

  var cssLoader = {

      loader: 'css-loader',

      options: {

          // options是用來傳遞參數給loader的

          // minimize表示壓縮，若是是生產環境就壓縮css代碼

          minimize: process.env.NODE_ENV === 'production',

          // 是否開啓cssmap，默認是false

          sourceMap: options.sourceMap

      }

  }

 

  // generate loader string to be used with extract text plugin

  function generateLoaders (loader, loaderOptions) {

      // 將上面的基礎cssLoader配置放在一個數組裏面

      var loaders = [cssLoader]

      // 若是該函數傳遞了單獨的loader就加到這個loaders數組裏面，這個loader多是less,sass之類的

      if (loader) {

          loaders.push({

              // 加載對應的loader

              loader: loader + '-loader',

              // Object.assign是es6的方法，主要用來合併對象的，淺拷貝

              options: Object.assign({}, loaderOptions, {

                  sourceMap: options.sourceMap

              })

          })

      }

 

      // Extract CSS when that option is specified

      // (which is the case during production build)

      // 注意這個extract是自定義的屬性，能夠定義在options裏面，主要做用就是當配置爲true就把文件單獨提取，false表示不單獨提取，這個能夠在使用的時候單獨配置，瞬間以爲vue做者好牛逼

      if (options.extract) {

          return ExtractTextPlugin.extract({

              use: loaders,

              fallback: 'vue-style-loader'

          })

      } else {

          return ['vue-style-loader'].concat(loaders)

      }

      // 上面這段代碼就是用來返回最終讀取和導入loader，來處理對應類型的文件

  }

 

  // https://vue-loader.vuejs.org/en/configurations/extract-css.html

  return {

      css: generateLoaders(), // css對應 vue-style-loader 和 css-loader

      postcss: generateLoaders(), // postcss對應 vue-style-loader 和 css-loader

      less: generateLoaders('less'), // less對應 vue-style-loader 和 less-loader

      sass: generateLoaders('sass', { indentedSyntax: true }), // sass對應 vue-style-loader 和 sass-loader

      scss: generateLoaders('sass'), // scss對應 vue-style-loader 和 sass-loader

      stylus: generateLoaders('stylus'), // stylus對應 vue-style-loader 和 stylus-loader

      styl: generateLoaders('stylus') // styl對應 vue-style-loader 和 styl-loader 

  }

}

 

// Generate loaders for standalone style files (outside of .vue)

// 下面這個主要處理import這種方式導入的文件類型的打包，上面的exports.cssLoaders是爲這一步服務的

exports.styleLoaders = function (options) {

  var output = []

  // 下面就是生成的各類css文件的loader對象

  var loaders = exports.cssLoaders(options)

  for (var extension in loaders) {

      // 把每一種文件的laoder都提取出來

      var loader = loaders[extension]

      output.push({

          // 把最終的結果都push到output數組中，大事搞定

          test: new RegExp('\\.' + extension + '$'),

          use: loader

      })

  }

  return output

}

 

 

vue-cli腳手架config目錄下index.js配置文件

此配置文件是用來定義開發環境和生產環境中所須要的參數

// see http://vuejs-templates.github.io/webpack for documentation.

// path是node.js的路徑模塊，用來處理路徑統一的問題

var path = require('path')

 

module.exports = {

  // 下面是build也就是生產編譯環境下的一些配置

  build: {

      // 導入prod.env.js配置文件，只要用來指定當前環境，詳細見(1)

      env: require('./prod.env'),

      // 下面是相對路徑的拼接，假如當前跟目錄是config，那麼下面配置的index屬性的屬性值就是dist/index.html

      index: path.resolve(__dirname, '../dist/index.html'),

      // 下面定義的是靜態資源的根目錄 也就是dist目錄

      assetsRoot: path.resolve(__dirname, '../dist'),

      // 下面定義的是靜態資源根目錄的子目錄static，也就是dist目錄下面的static

      assetsSubDirectory: 'static',

      // 下面定義的是靜態資源的公開路徑，也就是真正的引用路徑

      assetsPublicPath: '/',

      // 下面定義是否生成生產環境的sourcmap，sourcmap是用來debug編譯後文件的，經過映射到編譯前文件來實現

      productionSourceMap: true,

      // Gzip off by default as many popular static hosts such as

      // Surge or Netlify already gzip all static assets for you.

      // Before setting to `true`, make sure to:

      // npm install --save-dev compression-webpack-plugin

      // 下面是是否在生產環境中壓縮代碼，若是要壓縮必須安裝compression-webpack-plugin

      productionGzip: false,

      // 下面定義要壓縮哪些類型的文件

      productionGzipExtensions: ['js', 'css'],

      // Run the build command with an extra argument to

      // View the bundle analyzer report after build finishes:

      // `npm run build --report`

      // Set to `true` or `false` to always turn it on or off

      // 下面是用來開啓編譯完成後的報告，能夠經過設置值爲true和false來開啓或關閉

      // 下面的process.env.npm_config_report表示定義的一個npm_config_report環境變量，能夠自行設置

      bundleAnalyzerReport: process.env.npm_config_report

  },

  dev: {

      // 引入當前目錄下的dev.env.js，用來指明開發環境，詳見(2)

      env: require('./dev.env'),

      // 下面是dev-server的端口號，能夠自行更改

      port: 8080,

      // 下面表示是否自定代開瀏覽器

      autoOpenBrowser: true,

      assetsSubDirectory: 'static',

      assetsPublicPath: '/',

      // 下面是代理表，做用是用來，建一個虛擬api服務器用來代理本機的請求，只能用於開發模式

      // 詳見(3)

      proxyTable: {},

      // CSS Sourcemaps off by default because relative paths are "buggy"

      // with this option, according to the CSS-Loader README

      // (https://github.com/webpack/css-loader#sourcemaps)

      // In our experience, they generally work as expected,

      // just be aware of this issue when enabling this option.

      // 是否生成css，map文件，上面這段英文就是說使用這個cssmap可能存在問題，可是按照經驗，問題不大，可使用

      // 給人以爲不必用這個，css出了問題，直接控制檯不就完事了

      cssSourceMap: false

  }

}

註釋

(1)下面是prod.env.js的配置內容

  module.exports = {

      // 做用很明顯，就是導出一個對象，NODE_ENV是一個環境變量，指定production環境

      NODE_ENV: '"production"'

  }

(2)下面是dev.env.js的配置內容

  // 首先引入的是webpack的merge插件，該插件是用來合併對象，也就是配置文件用的，相同的選項會被覆蓋，至於這裏爲何屢次一舉，可能另有他圖吧

  var merge = require('webpack-merge')

  // 導入prod.env.js配置文件

  var prodEnv = require('./prod.env')

  // 將兩個配置對象合併，最終結果是 NODE_ENV: '"development"'

  module.exports = merge(prodEnv, {

      NODE_ENV: '"development"'

  })

(3)下面是proxyTable的通常用法

  vue-cli使用這個功能是藉助http-proxy-middleware插件，通常解決跨域請求api

  proxyTable: {

      '/list': {

          target: 'http://api.xxxxxxxx.com', -> 目標url地址

          changeOrigin: true, -> 指示是否跨域

          pathRewrite: {

          '^/list': '/list' -> 可使用 /list 等價於 api.xxxxxxxx.com/list

          }

      }

  }