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
}
}
}
vue-cli腳手架每行註釋--摘抄