vue-cli脚手架每行注释

Posted 2020-10-24 mhxy13867806343

  1 .babelrc文件
  2 
  3 {
  4 
  5   // 此项指明，转码的规则
  6 
  7   "presets": [
  8 
  9       // env项是借助插件babel-preset-env，下面这个配置说的是babel对es6,es7,es8进行转码，并且设置amd,commonjs这样的模块化文件，不进行转码
 10 
 11       ["env", { "modules": false }],
 12 
 13       // 下面这个是不同阶段出现的es语法，包含不同的转码插件
 14 
 15       "stage-2"
 16 
 17   ],
 18 
 19   // 下面这个选项是引用插件来处理代码的转换，transform-runtime用来处理全局函数和优化babel编译
 20 
 21   "plugins": ["transform-runtime"],
 22 
 23   // 下面指的是在生成的文件中，不产生注释
 24 
 25   "comments": false,
 26 
 27   // 下面这段是在特定的环境中所执行的转码规则，当环境变量是下面的test就会覆盖上面的设置
 28 
 29   "env": {
 30 
 31       // test 是提前设置的环境变量，如果没有设置BABEL_ENV则使用NODE_ENV，如果都没有设置默认就是development
 32 
 33       "test": {
 34 
 35           "presets": ["env", "stage-2"],
 36 
 37           // instanbul是一个用来测试转码后代码的工具
 38 
 39           "plugins": ["istanbul"]
 40 
 41       }
 42 
 43   }
 44 
 45 }
 46 
 47 
 48 
 49 vue-cli build目录中的 utils.js 配置文件
 50 
 51 此配置文件是vue开发环境的wepack相关配置文件，主要用来处理css-loader和vue-style-loader
 52 
 53 // 引入nodejs路径模块
 54 
 55 var path = require(‘path‘)
 56 
 57 // 引入config目录下的index.js配置文件
 58 
 59 var config = require(‘../config‘)
 60 
 61 // 引入extract-text-webpack-plugin插件，用来将css提取到单独的css文件中
 62 
 63 // 详情请看(1)
 64 
 65 var ExtractTextPlugin = require(‘extract-text-webpack-plugin‘)
 66 
 67 // exports其实就是一个对象，用来导出方法的最终还是使用module.exports，此处导出assetsPath
 68 
 69 exports.assetsPath = function (_path) {
 70 
 71     // 如果是生产环境assetsSubDirectory就是‘static‘，否则还是‘static‘，
 72 
 73     var assetsSubDirectory = process.env.NODE_ENV === ‘production‘
 74 
 75         ? config.build.assetsSubDirectory
 76 
 77         : config.dev.assetsSubDirectory
 78 
 79     // path.join和path.posix.join的区别就是，前者返回的是完整的路径，后者返回的是完整路径的相对根路径
 80 
 81     // 也就是说path.join的路径是C:a/a/b/xiangmu/b，那么path.posix.join就是b
 82 
 83     return path.posix.join(assetsSubDirectory, _path)
 84 
 85     // 所以这个方法的作用就是返回一个干净的相对根路径
 86 
 87 }
 88 
 89 
 90 
 91 // 下面是导出cssLoaders的相关配置
 92 
 93 exports.cssLoaders = function (options) {
 94 
 95   // options如果没值就是空对象
 96 
 97   options = options || {}
 98 
 99   // cssLoader的基本配置
100 
101   var cssLoader = {
102 
103       loader: ‘css-loader‘,
104 
105       options: {
106 
107           // options是用来传递参数给loader的
108 
109           // minimize表示压缩，如果是生产环境就压缩css代码
110 
111           minimize: process.env.NODE_ENV === ‘production‘,
112 
113           // 是否开启cssmap，默认是false
114 
115           sourceMap: options.sourceMap
116 
117       }
118 
119   }
120 
121 
122 
123   // generate loader string to be used with extract text plugin
124 
125   function generateLoaders (loader, loaderOptions) {
126 
127       // 将上面的基础cssLoader配置放在一个数组里面
128 
129       var loaders = [cssLoader]
130 
131       // 如果该函数传递了单独的loader就加到这个loaders数组里面，这个loader可能是less,sass之类的
132 
133       if (loader) {
134 
135           loaders.push({
136 
137               // 加载对应的loader
138 
139               loader: loader + ‘-loader‘,
140 
141               // Object.assign是es6的方法，主要用来合并对象的，浅拷贝
142 
143               options: Object.assign({}, loaderOptions, {
144 
145                   sourceMap: options.sourceMap
146 
147               })
148 
149           })
150 
151       }
152 
153 
154 
155       // Extract CSS when that option is specified
156 
157       // (which is the case during production build)
158 
159       // 注意这个extract是自定义的属性，可以定义在options里面，主要作用就是当配置为true就把文件单独提取，false表示不单独提取，这个可以在使用的时候单独配置，瞬间觉得vue作者好牛逼
160 
161       if (options.extract) {
162 
163           return ExtractTextPlugin.extract({
164 
165               use: loaders,
166 
167               fallback: ‘vue-style-loader‘
168 
169           })
170 
171       } else {
172 
173           return [‘vue-style-loader‘].concat(loaders)
174 
175       }
176 
177       // 上面这段代码就是用来返回最终读取和导入loader，来处理对应类型的文件
178 
179   }
180 
181 
182 
183   // https://vue-loader.vuejs.org/en/configurations/extract-css.html
184 
185   return {
186 
187       css: generateLoaders(), // css对应 vue-style-loader 和 css-loader
188 
189       postcss: generateLoaders(), // postcss对应 vue-style-loader 和 css-loader
190 
191       less: generateLoaders(‘less‘), // less对应 vue-style-loader 和 less-loader
192 
193       sass: generateLoaders(‘sass‘, { indentedSyntax: true }), // sass对应 vue-style-loader 和 sass-loader
194 
195       scss: generateLoaders(‘sass‘), // scss对应 vue-style-loader 和 sass-loader
196 
197       stylus: generateLoaders(‘stylus‘), // stylus对应 vue-style-loader 和 stylus-loader
198 
199       styl: generateLoaders(‘stylus‘) // styl对应 vue-style-loader 和 styl-loader 
200 
201   }
202 
203 }
204 
205 
206 
207 // Generate loaders for standalone style files (outside of .vue)
208 
209 // 下面这个主要处理import这种方式导入的文件类型的打包，上面的exports.cssLoaders是为这一步服务的
210 
211 exports.styleLoaders = function (options) {
212 
213   var output = []
214 
215   // 下面就是生成的各种css文件的loader对象
216 
217   var loaders = exports.cssLoaders(options)
218 
219   for (var extension in loaders) {
220 
221       // 把每一种文件的laoder都提取出来
222 
223       var loader = loaders[extension]
224 
225       output.push({
226 
227           // 把最终的结果都push到output数组中，大事搞定
228 
229           test: new RegExp(‘\\.‘ + extension + ‘$‘),
230 
231           use: loader
232 
233       })
234 
235   }
236 
237   return output
238 
239 }
240 
241 
242 
243 
244 vue-cli脚手架config目录下index.js配置文件
245 
246 此配置文件是用来定义开发环境和生产环境中所需要的参数
247 
248 // see http://vuejs-templates.github.io/webpack for documentation.
249 
250 // path是node.js的路径模块，用来处理路径统一的问题
251 
252 var path = require(‘path‘)
253 
254 
255 
256 module.exports = {
257 
258   // 下面是build也就是生产编译环境下的一些配置
259 
260   build: {
261 
262       // 导入prod.env.js配置文件，只要用来指定当前环境，详细见(1)
263 
264       env: require(‘./prod.env‘),
265 
266       // 下面是相对路径的拼接，假如当前跟目录是config，那么下面配置的index属性的属性值就是dist/index.html
267 
268       index: path.resolve(__dirname, ‘../dist/index.html‘),
269 
270       // 下面定义的是静态资源的根目录 也就是dist目录
271 
272       assetsRoot: path.resolve(__dirname, ‘../dist‘),
273 
274       // 下面定义的是静态资源根目录的子目录static，也就是dist目录下面的static
275 
276       assetsSubDirectory: ‘static‘,
277 
278       // 下面定义的是静态资源的公开路径，也就是真正的引用路径
279 
280       assetsPublicPath: ‘/‘,
281 
282       // 下面定义是否生成生产环境的sourcmap，sourcmap是用来debug编译后文件的，通过映射到编译前文件来实现
283 
284       productionSourceMap: true,
285 
286       // Gzip off by default as many popular static hosts such as
287 
288       // Surge or Netlify already gzip all static assets for you.
289 
290       // Before setting to `true`, make sure to:
291 
292       // npm install --save-dev compression-webpack-plugin
293 
294       // 下面是是否在生产环境中压缩代码，如果要压缩必须安装compression-webpack-plugin
295 
296       productionGzip: false,
297 
298       // 下面定义要压缩哪些类型的文件
299 
300       productionGzipExtensions: [‘js‘, ‘css‘],
301 
302       // Run the build command with an extra argument to
303 
304       // View the bundle analyzer report after build finishes:
305 
306       // `npm run build --report`
307 
308       // Set to `true` or `false` to always turn it on or off
309 
310       // 下面是用来开启编译完成后的报告，可以通过设置值为true和false来开启或关闭
311 
312       // 下面的process.env.npm_config_report表示定义的一个npm_config_report环境变量，可以自行设置
313 
314       bundleAnalyzerReport: process.env.npm_config_report
315 
316   },
317 
318   dev: {
319 
320       // 引入当前目录下的dev.env.js，用来指明开发环境，详见(2)
321 
322       env: require(‘./dev.env‘),
323 
324       // 下面是dev-server的端口号，可以自行更改
325 
326       port: 8080,
327 
328       // 下面表示是否自定代开浏览器
329 
330       autoOpenBrowser: true,
331 
332       assetsSubDirectory: ‘static‘,
333 
334       assetsPublicPath: ‘/‘,
335 
336       // 下面是代理表，作用是用来，建一个虚拟api服务器用来代理本机的请求，只能用于开发模式
337 
338       // 详见(3)
339 
340       proxyTable: {},
341 
342       // CSS Sourcemaps off by default because relative paths are "buggy"
343 
344       // with this option, according to the CSS-Loader README
345 
346       // (https://github.com/webpack/css-loader#sourcemaps)
347 
348       // In our experience, they generally work as expected,
349 
350       // just be aware of this issue when enabling this option.
351 
352       // 是否生成css，map文件，上面这段英文就是说使用这个cssmap可能存在问题，但是按照经验，问题不大，可以使用
353 
354       // 给人觉得没必要用这个，css出了问题，直接控制台不就完事了
355 
356       cssSourceMap: false
357 
358   }
359 
360 }
361 
362 注释
363 
364 (1)下面是prod.env.js的配置内容
365 
366   module.exports = {
367 
368       // 作用很明显，就是导出一个对象，NODE_ENV是一个环境变量，指定production环境
369 
370       NODE_ENV: ‘"production"‘
371 
372   }
373 
374 (2)下面是dev.env.js的配置内容
375 
376   // 首先引入的是webpack的merge插件，该插件是用来合并对象，也就是配置文件用的，相同的选项会被覆盖，至于这里为什么多次一举，可能另有他图吧
377 
378   var merge = require(‘webpack-merge‘)
379 
380   // 导入prod.env.js配置文件
381 
382   var prodEnv = require(‘./prod.env‘)
383 
384   // 将两个配置对象合并，最终结果是 NODE_ENV: ‘"development"‘
385 
386   module.exports = merge(prodEnv, {
387 
388       NODE_ENV: ‘"development"‘
389 
390   })
391 
392 (3)下面是proxyTable的一般用法
393 
394   vue-cli使用这个功能是借助http-proxy-middleware插件，一般解决跨域请求api
395 
396   proxyTable: {
397 
398       ‘/list‘: {
399 
400           target: ‘http://api.xxxxxxxx.com‘, -> 目标url地址
401 
402           changeOrigin: true, -> 指示是否跨域
403 
404           pathRewrite: {
405 
406           ‘^/list‘: ‘/list‘ -> 可以使用 /list 等价于 api.xxxxxxxx.com/list
407 
408           }
409 
410       }
411 
412   }

 来源:vue-cli脚手架每行注释