萌新误入vue-loader洞穴 -- sourcemap

Atom 发布于2019-08-21 11:24 / 551人阅读

摘要：今天的主线任务是，稍微了解下的这里简单记录下打怪经历故事背景大祭司布鲁梅尔，跟玩家说在杰罗瓦镇的西北方有一个迷宫，里面有个被关闭了年的魔物，我们需要把这个魔物干掉，正好以此来测试下玩家是否具备开启者的资格，也就是战斗系转职资格。

今天的主线任务是，稍微了解下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...

项目结构

这里要了解的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 = /
/g;
console.log(r.test("
")); // => true
console.log(r.test("
")); // => 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

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

然后以此例来分析下，

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: "

  hello

",
    start: 10,
    end: 65 
  },
  script: {
    type: "script",
    content: "//
//
//
//
//
//

module.exports = {
  created() {
   console.log("hello .vue file")
  }
}
",
    start: 86,
    end: 161 
  },
  styles: [
    { 
      type: "style",
      content: "














.hello {
  font-size: 12px;
}
",
      start: 186,
      scoped: true,
      end: 217 
    }
  ],
  customBlocks: [] 
}

战斗结束

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86666.html

如何创建一个webpack loader

摘要：在目前的开源市场，前端架构中最火热的项目非莫属了。在使用的过程中，我们会用到各式各样的，毫无疑问，因为机制的存在让拥有了无限的可能性，让几乎可以容纳一切前端需要的资源。在目前的开源市场，前端架构中最火热的项目非webpack莫属了。在使用webpack的过程中，我们会用到各式各样的loader，毫无疑问，因为loader机制的存在让webpack拥有了无限的可能性，让webpack几...

April 2019-06-24 17:48 评论0 收藏0
vue-cli解析

摘要：在中，设置了一些配置，代码如下通过它的注释，我们可以理解它在中配置了静态路径本地服务器配置项等参数。下面还有一个的对象，它是在本地服务器启动时，打包的一些配置，代码如下其中包括模版文件的修改，打包完目录之后的一些路径设置，压缩等。前言这段时间，算是空出手来写几篇文章了。由于很久都没有时间整理现在所用的东西了，所以，接下来会慢慢整理出一些文档来记录前段时间的工作和生活。这篇文章的主...

KunMinX 2019-08-21 18:24 评论0 收藏0
vue-loader 源码解析系列之 selector

摘要：当前正在处理的节点，以及该节点的和等信息。源码解析之一整体分析源码解析之三写作中源码解析之四写作中作者博客作者作者微博笔者系 vue-loader 贡献者之一（#16）前言 vue-loader 源码解析系列之一，阅读该文章之前，请大家首先参考大纲 vue-loader 源码解析系列之整体分析 selector 做了什么 const path = require(path) co...

miqt 2019-08-21 17:58 评论0 收藏0
TypeScript和vuejs 搭建webpack，初次体验

摘要：决定改开发好，也好，二者结合实践一下，网上一搜，刚好有。下面我把所有过程写下，如有问题可以再文后留言，我详解一下。决定改TypeScript开发TypeScript好，vuejs也好，二者结合实践一下，网上一搜：https://github.com/Microsoft/...，刚好有。以后就用TypeScript搞了。下面我把所有过程写下，如有问题可以再文后留言，我详解一下。或者加我...

shengguo 2019-08-21 17:39 评论0 收藏0
vue-cli webpack配置分析

相信vue使用者对vue-cli都不会陌生，甚至可以说，很熟悉了，但对其webpack的配置可能知之甚少吧。过完年回来后，我接手了公司的新项目。新项目是一个spa。很自然，我就想到了vue-cli脚手架了，当时研究一下它的webpack配置。于是，就有了其他的内容。今天这篇文章，是在原来的基础上，增加了一些新版本的内容，但实质上变化不大。说明此仓库为vue-cli webpack的配置分析...

suemi 2019-08-21 11:35 评论0 收藏0