2

今天的主线任务是,稍微了解下vue-loader的sourcemap

这里简单记录下打怪经历

故事背景

大祭司布鲁梅尔,跟玩家说在杰罗瓦镇的西北方有一个迷宫,里面有个被关闭了300年的魔物,我们需要把这个魔物干掉,正好以此来测试下玩家是否具备"开启者"的资格,也就是战斗系转职资格。

于是作为勇士的我来到了杰村,获取钥匙
图片描述

图片描述

任务之前,先说一下,有不少法兰城的勇士,并不喜欢它,有人说它违反了webpack自定义loader的精神,不支持inlineTemplate(具体这个inlineTemplate是什么鬼?)...

引自https://webpack.github.io/doc...

do only a single task

Loaders can be chained. Create loaders for every step, instead of a loader that does everything at once.

This also means they should not convert to JavaScript if not necessary.

Example: Render HTML from a template file by applying the query parameters
I could write a loader that compiles the template from source, execute it and return a module that exports a string containing the HTML code. This is bad.

作为萌新的我,并不知道vue-loader发生了什么了,只能说一脸蒙逼

但是我内心其实觉得vue-loader作为一个vue配套的工具,还是挺不错的

怀揣这样的心情,就来到了门口
图片描述

二话不说,正式开干

怎么说呢,还是先了解下vue-loader的作用,它可以transform以vue结尾的文件,从而达到一些目的,比如单文件component, hot reload, scope css...

项目结构

clipboard.png

这里要了解的sourcemap,都在parser.js文件中

source code分析

引入的外部模块

var compiler = require('vue-template-compiler')
var cache = require('lru-cache')(100)
var hash = require('hash-sum')
var SourceMapGenerator = require('source-map').SourceMapGenerator
  • lru-cache,lru缓存,vue1.0内部也用的

  • hash-sum,其简介为Blazing fast unique hash generator,用于生成hash

  • soruce-map,一个我们生成sourcemap主要的依赖库,这里用的其属性为SourceMapGenerator的类

  • vue-template-compiler,模块发现是vue内部的代码,为src/entries/web-compiler.js文件,这个模块是由vue的build/build.js,使用rollup生成的packager,哦? 少年好像又学到了什么。具体vue-template-compiler搞了什么,暂时不管,先标个红

generateSourceMap函数

function generateSourceMap (filename, source, generated) {
  var map = new SourceMapGenerator()
  map.setSourceContent(filename, source)
  generated.split(splitRE).forEach((line, index) => {
    if (!emptyRE.test(line)) {
      map.addMapping({
        source: filename,
        original: {
          line: index + 1,
          column: 0
        },
        generated: {
          line: index + 1,
          column: 0
        }
      })
    }
  })
  return map.toJSON()
}

判断空行的目的是,这样的话,那些空白行就不会生成map,减少map体积

chrome调试的时候,那些空白行也是灰的,没必要打断点嘛

然后,那个换行正则也是很有意思,外服的玩家讨论了一番,https://github.com/webpack/we...
结论就是g这样的flag,js容易出问题的,比如你可以在控制台里感受下:

var r = /\n/g;
console.log(r.test("\n")); // => true
console.log(r.test("\n")); // => false

解决是,要吗将正则的属性lastIndex = 0,要吗将g去掉

导出函数

module.exports = function (content, filename, needMap) {
  var cacheKey = hash(filename + content)
  // source-map cache busting for hot-reloadded modules
  var filenameWithHash = filename + '?' + cacheKey
  var output = cache.get(cacheKey)
  if (output) return output
  output = compiler.parseComponent(content, { pad: true })
  if (needMap) {
    if (output.script && !output.script.src) {
      output.script.map = generateSourceMap(
        filenameWithHash,
        content,
        output.script.content
      )
    }
    if (output.styles) {
      output.styles.forEach(style => {
        if (!style.src) {
          style.map = generateSourceMap(
            filenameWithHash,
            content,
            style.content
          )
        }
      })
    }
  }
  cache.set(cacheKey, output)
  return output
}

任务途中,突遇掉线,果然很魔力

掉线回城,东门医院补血,继续任务

这里举个例子,然后理解下
index.html

<div id="app"></div>

src/index.js

const Vue = require('vue')
const Hello = require('./Hello.vue')

new Vue({
  el: '#app',
  components: {
    Hello: Hello
  },
  render: function(h) {
    return h(
      'Hello'
    )
  }
})

src/Hello.vue

<template>
  <div class="hello">
    <span>hello</span>
  </div>
</template>

<script>
module.exports = {
  created() {
    console.log('hello .vue file')
  }
}
</script>

<style scoped>
.hello {
  font-size: 12px;
}
</style>

然后以此例来分析下,

3个参数

  • content: Hello.vue中的文件内容

  • filename: Hello.vue

  • needMap: webpack配置中如果dev-tools使用了'source-map'... 则为true

调用compiler.parseComponent(content, { pad: true }),会解析成下面的格式,
稍微注意style是一个数组的形式,即可以有多个style标签

然后这些标签其实可以有src属性,表示引入外部对应的文件,比如这里判断了!output.script.src

{ 
  template: { 
    type: 'template',
    content: '\n<div class="hello">\n  <span>hello</span>\n</div>\n',
    start: 10,
    end: 65 
  },
  script: {
    type: 'script',
    content: '//\n//\n//\n//\n//\n//\n\nmodule.exports = {\n  created() {\n   console.log(\'hello .vue file\')\n  }\n}\n',
    start: 86,
    end: 161 
  },
  styles: [
    { 
      type: 'style',
      content: '\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n.hello {\n  font-size: 12px;\n}\n',
      start: 186,
      scoped: true,
      end: 217 
    }
  ],
  customBlocks: [] 
}

战斗结束

图片描述
图片描述

ok,没怎么费血瓶,顺利获取重要道具:大地翼龙的鳞片1个,下一层继续出发


小雨心情
141 声望7 粉丝