21-尚硅谷-webpack从入门到精通-source-map

接下来呢，我们要研究一个开发环境下如何去调试代码，也是解决开发环境下调试代码的问题的。这个技术呢，我们叫source map。好，那么接下来呢，我们打开Vs code来去研究它。加18的负值一分啊，我们叫19MAP。OK，好，我们来写这东西啊，是什么呢？我们给大家介绍一下。在在这在这下面去写啊。Map呢，它是一个提供啊。一种一一种技术啊。一种怎样的技术呢？提供。源代码。到构代码。的一个映射的这样的一个技术。代码。

哎，可能大家呢，都看过购机后代码啊，购机后代码呢和原代码呢是千差万别的，比方说我原代码呢有100个模块，那输出到购机后代码呢，可能只有一个模块了，也就这一个模块中呢，有这100个模块的代码集合体。所以呢，你要去找这个代码出错的位置就比较难啊，那么有了map这个技术呢，如果你购机后代码出错。啊，构机后代码出错了，哎，它会通过这个映射关系。可以追踪到源代码的错误。这时候呢，我们就不用操心了，哎，我们能够知道源代码哪错了，从而去改源代码是这样的一个技术，所以呢，它非常利于我们去调试，去找这个错误的原因。而这source map呢，在在我们的这个中啊，只需要在这里加一个DOL tool，哎，为map，那么就可以做好了。

那么它会生成一个map文件啊，我们来执行一下啊，我们会运行看效果。我们执行这个PA指令，好，PA指定呢，它会构建输出代码，其中呢，在必要的下面，我们就以看到这个JS下面有个map文件了。这个map呢，就是我们所谓的map文件，它提供了源代码和构建代码的一种映射关系。啊，当然这里面东西呢，比较乱，我们也不用操心啊，这里面有什么内容，我们只要知道，诶像这种什么点map的文件啊，在这那么一般呢，就是我们提供一种源代码导购结构代码映射的这样的一个文件啊，那么简称为s map。好，那么map呢，这样写法呢，是最基本的配置，那么其中呢，它还有以下这几个参数，我们来说说啊。面部呢，大概写法呢，可以分为这样的。

啊。或者说咱们的。呃，叫做黑的。还有就是我们的这个。然后中间呢，可以写一个叫做no。然后后面呢，可以加一个东西叫trip。诶，Trip里面呢，你还要加个东西叫，然后最后呢，就是我们的source map了。二值呢？由这些可以组成。由这些组成，那么这些值代表什么含义呢？我们和大家说一说啊。啊，依赖它有个S呢，一起来配合使用。一起配合使用。好，然后呢的呢，也可以和一起配合使用。啊，或者是那么这几个之间又有什么区别呢？那我们可以看一看啊，我们可以看看。这三个的一个区别啊，首先我们也就这些东西的话呢，可以直接去测试啊，直接可以测试，比如我调一个line map。

好，测试的时候呢，我们把这标的构建后的东西呢，给删掉啊给删掉。然后呢，让它重新生成一个，重新生成一个。来，我们再输一遍，输它构输的内容是什么？它构件输出的一些文件啊，我们打开SC会发现啊，打开B的啊，看build的。这里面呢，没有那个标字点啊，那个标j.map文件，但是呢，它会在下面生成一个这样的一个BASE64编码的一种s map文件啊，会在这。啊，这种方式呢，它是嵌到这个JS中的，所以我们叫内联啊叫内联。像它如果生成一个外部的这样source map文件呢，我们叫诶外部的map文件，而这叫内里的source map文件，所以呢，这种东西呢，我们会叫做内敛。那里？那么内里跟外部有什么区别呢？哎，区别就是。

像这种呢，是内联啊，那么将来呢，还有外部的。和外部。区别就是。啊，第一点区别就是啊。外部，外部生成的文件。啊，内部没有那里是没有的。第二个是内敛速度，构建速度更快。好，知道这个就好了，那你速度更快。好，一旦内啊，我们去运行一下啊，待会可以去运行一下，现在还运行，我们现在一个测试这种叫内，那么这个hidden看看它是什么啊，Hidden看它是什么，我们在于形词。啊。看效果P的呢，诶，它会生成source map文件，你看这里会有个模map文件啊，那么所以P的呢，你可以定为是外部。那么E呢，我们也测试一下啊，一。

Source map来运行，当然了，要运行之前呢，这时候呢，把这个map文件删掉啊，现在简单一点上map就可以了，就如果它是外部的话呢，一定会重新生成的，如果是内里的话呢，它不会生成。好之后去看啊，它没有生成那个map文件，那文件呢在这儿啊。它呢，这个咱们这个E啊，它稍微不一样，它是没文件诶有点卡啊在这。往下走，每一个这个后面呢，都会生成一个这样SUL啊，当然这CU不是啊，是往右边走。啊，往左边走，这个呢，就是对应的那个source map文件，它又变成四。每一个JS文件，每一个文件后面呢，都会加一个这样的map。啊，我们可以翻一下啊。你看这个文件呢，也map往上翻这个文件也有，就每一个文件后面都会加一个map文件，所以E呢也是那点啊，它也是那点。那么不同的是呢，这种类型呢，哎，我们可以大概说一下啊。

这第一啊，它的内里是只生成一个内的level。下面是每一个文件都生成一个map，就这区别。并且呢，都在，都在一我中啊，都在函数中。所以呢，这个呢，就叫啊，就这样的区别啊，稍微有区别。就是这个啊。好，那后面这些呢，我们也可以测试一下no sources来直接改啊，No sources source map看看它的区别啊，当然呢，我们这里没有生成内里没生成we，所以可以直接运行。好，它也会生成一个外部的啊，所以这个。这个map呢，它也会生成一个web的，我们就直接复制了啊。生成外部的。

好，就不看外部的内容了啊，还有trip。那么测试的话呢，也是一样的，把这个东西呢移上去。好，然后去运行。当我们下面可以拖小一点，不要拖这么大。好，把这个外部的这个map文件删掉啊，然后再行一次。哎，他设置的也是外部好。好，然后呢，当然还有map啊，其实还有个map也是生成，我们就不一个写了，就告诉大家它也是。那么的。也是外部啊，我们就这样简单写一写。好，这些呢，是单独的每一个他们去做测试的，我们看到的结果啊，看到结果。那么其实呢，他们之间的任意之间还可两两组合，哎，当然呢，我们先不组合啊，先不组合，我们先要研究一下，哎，这些内联外部啊，这些自然呢，到底代表什么含义，又有什么作用，那我们接下来就研究这个。

好，我们呢，从从从这个开始啊，Map呢，我们就不看了啊。我。以我们这时候要去行码的指R指定看少写了一个啊。好，然后呢，我们第一个测试的是map回车运行。好，运行成功啊，运行成功这样呢，也打开了啊，打开了我们又去检查。好，当然了，现在呢，我们应该是代码没有问题的啊，没有问题的，所以让它产生一个错误。我们呢，找到这个源代码，找到源代码。

加这个print呢，比方说这个cancel语句呢，调两次啊。那我们知道cancel呢，它的调用呢，它可以调用一次进行打印，回是这样再调一次。那么就会报错，此时我们看页面诶就会报错了，哎，他告诉我了是这个看l log这个东西呢，出问题了，也告诉我了是print d GS第五行代码，我们看prince d JS第五行代码你看。所以呢，Map能够准确提示到文件的具体的错误位置，同时当你点进去的话呢，它会把你提示到源代码的这个路径啊。那么这里面配置这个我们现在source我们资源里我们两个目录。上面这个目录呢，指的是构建后代码生成的代码，诶，比如说S构建后代码。下面目录呢，你可以理解为类似于代码的一些东西，这下面呢，就是我们开发的代码了，GS，你看SS。所以呢，它这里面啊有代码，然后通过那个map文件呢，诶映射到代码出现错误的位置，从而呢，给你提示这个代码这个错误。

所以大概是这样的过程啊。所以map呢，本第一种map呢，它是能够建立起我们准确的一个关系，这个关系呢，包含就错误代码的一个详细提示，准确提示，以及点进去呢，能够追踪到原代码的一个错误位置啊。所以呢，这里面能提示的是啊。咱们的错误代码的准确信息。和啊错误代码的源代码的错误位置。是能够提示到这些内容的啊OK。This。好，那我们看一下line，它有什么区别呢？那我们都可以一个测试一下啊。好调音的话呢，改了这个配置，一定要把这个派服务器呢，重启一下，重新运行。

好，我们看一下音了。调试确。所以呢，和我们的这个呃，Map呢，基本上是一致的啊，一致的不同的是呢，Map呢，它生产的是是在内。好，再看K的，再看的。好，我们来看啊he的。好的话呢，它呢提示了这个错误啊，提示了准确的错误啊，报错的时候呢，提示错误，但是错误代码的位置呢，有问题啊，有问题什么一万多行不可能啊。然后呢，他所提示的文件呢，也叫build DS，而实际上呢，我们叫print DS，那您去看诶，它的确提示到了这个错误代码的一个情况，但是这个代码呢，明显是购机后代码，而不是我们的原代码。

所以这个黑的呢，它是这样的关系啊，它能够提示到错误代码的一个。错误代码错误原因。但是啊。但是没有错位置。然后呢，不能追踪到。源代码的错误。只提示到代码的误位置。啊，就是这个。所以如果用hidden这个东西的话，去调试的话呢，哎，你得对代码呢非常熟悉啊，你得通过购机后代码自己去查找这个原代码的错误，错误位置，所以得这样啊，这是这个T的。

好，那么E的话呢，我们也来看一下E。中止。啊，那在一起。好警察啊。看这个看L好，它提示的错误呢，没问题，是不是那S第五行啊好后面呢，你可以理解为是个哈希值，是个哈希值，我们再点进去。其实呢，原代码错误呢，也没问题啊，其实它就是因为这个代码文件呢，它后面呢，都会增加一个哈希值的啊，增加哈希值，所以呢啊在提示的时候，呃，这里面多个哈希值啊，多个多个相当于的ID吧。有这样的关系啊。我们来看，所以呢，这里面呢，咱们这个map map呢，其实跟我们前面的是一样的啊。只不过它多了一个这样的一个值值而已，这是没关系的。好。然后我们再看啊，再看还有这个us。我们来看。

几张？看到。好，示误原因问题个似这里有文件，实际上你双击哎，它也是找不到的。所以这个。啊，什么意思呢，能到错误代码的一些准确信息啊，但是。但是没有任何源代码的错误。但是没有任何源代码信息是这个。那么source啊和这个hidden这个东西啊，都是为了隐藏源代码，都是为了隐藏源代码就防止呢啊有有有啊防止这些程序员啊，通过这个咱们的一些调试啊，能找到源代码啊，从而你源代码造成泄露啊有些隐患，所以这两个呢，是为了隐藏源代码诞生的。

好，那trip呢，它是什么呢？我们可以看一下。睡吧。呃，我们可以每个都测试一下啊运行。然后trip的话呢，也能提示这个原因啊，也是第五行没问题，点进去看的话呢，也能跳转到这个代码错误。那么到底和我们的这些其他的有什么区别呢？我们可以看一下，我们把print改一下，把这个东西呢，改成一行，注意我改成一行了啊。好，Trip提示的呢，是一整行的文件错误啊，一整行的文件错误，这一整行他都报错了。那实际上呢，我们是cancel，后面这一句话报错了啊，Trip呢是一整行。那么我们如果改成比方说就我就去就是map，我们看map。大于形式。

好警察。找到这个。点进去啊，这时候呢，它提示的是这一个准准确的是这个cancel这块出错，而前面的就没打这个红色了。所以的意思呢，它是指精确的行，而不是列。他也提示这些错误信息啊，错误信息。嗯。但这儿呢，一定要注意，就是它只能精确到行。而其他其他的map精确和精确。就是他只能知道代码的哪一行出错了啊，具体是哪一列呢，他搞不清楚啊。他呢是能够精的，所以这是一个。啊modu map呢，我们它的意思呢，其实一样的，我们就不测试了啊，这个呢，没什么测试的必要。大概是这个，他们也是一样的。好了，那么他提供了这么多方案，那么我们到底怎么用呢？怎么呢？那么怎么的话们就要去考虑两种环境，生产环境和开发环。

那么生产开发环境呢？我们的要求就是速度啊，快一点。对吧，调试。更友好。啊，就是这个。生产环境呢，我们更多的是要考虑一些其他的问题啊。就是比方说源代码。要不要隐藏？啊，要考虑这个问题。调试达什么？啊，我们得考虑这个问题。比方说开发环境下，我们要求速度快，是不是？那到底什么样的速度才快呢？我们会说一下啊，一我是最快的。

其次啊，其次是这个，比方说啊这个。赢了啊。对吧，再其次呢，可以说些东西啊，然后其他不说了。所以最快的呢，我们可以理解为是一。但map呢，如果再加个trip，诶，它又会变得更快了，会变得更快了，因为trip呢，它构建的时候只会精确到行，而列忽略，而如果你不加，它会精确到列，这样呢把列去掉，它速度更快，所以这样呢，就相是你相当是把它比方说它是一级速度，它是二级，它三级度。这两个一组合，诶一组合它呢，速度就会达到更快。好，它速度是第一快，那么其次呢，有谁呢？其次，比如说就是E速map啊，那就是其次。就是这个。

那么调试更友好？那么怎样的调试是最友好的呢？我们说最精确的调试友好是。这里面主要是指的是这个model。这个model的话呢，啊。会将。我们比如些。也加进来。而这个呢，就不会加这些load，就只生成自己的，而不会将别人的东西拿进来，就这样的。所以呢，这种方式呢，是调试最友好的，那么其次呢，不就是把这个model给去掉吗。啊，当然了，调的最好的肯定是。Map啊，其次呢是什么map，再其次呢，就是。

是这样的关系，因为呢包含行和列啊，而trip呢是只集套行是这样的，当然摸的话呢更更友好一些，而不加摸的话呢，就稍微差一点。啊，大概是这样的关系。那么综上所述啊，我们要去平衡一下，平衡一下我们既想速度快，调试又友好，所以我们得平衡一下，取一个折中的点重点对吧，那么所以呢，我们啊，可以用个非常啊，基本的就是这个，比方说evil map啊。因为我们map呢，首先要看速度快啊，E是最快的，所以我们加E是最慢的，加是最慢的好，其次呢，为了调试友好，所以呢，最终得出结论就是。首先呢，本身是调试最友好的，加上E的话呢，诶，我的速度可以达到更快。所以这是我们的一种通过以上结论推出的一种方案啊，Map。

当然如果你速度更想快一点的话呢，你还加上trip啊，让速度达到更快，然后呢，要调试更加友好的话呢，再加个morning，就是这个。以实上有两种，择种是。啊，有两种。那么这种调试没有这种友没有这种，如果你想调试最友好，那这种啊，如果你想想把性能调好，那可以用下种。那么所以有两种选择啊。这两种选择呢，诶我们啊，后面会发现，如果你将来使用RA开发和开发，他们都有自己的脚手架。而脚手架里面的配置呢，默认使用的是这种。开发环境啊。好，生成合金呢，就考虑代码要不要隐藏，要隐藏的话呢，就得考虑这个no map和这个map。对吧，他们都可以或多或少的隐藏一些云代码，可以隐藏些代码。好，如果要调考虑调试友好的情况下呢，我们得考虑。

并且呢，我们开生产环境要考虑一个问题。这种内敛的方式啊，内敛啊有个问题。那里代码体积变得非常大。所以在生产环境下一般是不用内的，所以内里的所有方案都要排除掉。不用那里啊。我们为了让代码体积更小，一定要用外部的方式，外部方式呢，我们就只能考虑，比方说哎。这种房。这种。还有这种，以及下面这两种。好，那么首先第一个，如果考虑调试友好，那这是第一个啊。第二个是这些，第三个是这些啊，这是第一等级，第二等级，这是第三等级。调试，从调试角度上讲是这样的划分。好，那么从速度上来讲的话呢，哎，当然是trip的会更快一点。

所以综合评判一下的话呢，哎，你可以为综合考虑一下，你可以用这种。卡会用这种，或者说只考虑调试的话呢，就要。所以啊，我们的生产环境呢，最终的结论有两种啊。直接使用。那么要么呢，让他速度快点，就用module。啊，就是这个速度稍微快一点。啊，如果你真的需要隐藏源代码，哎，那你可考虑上面两种方案啊，可以去隐藏，那forces呢是彻底全部隐藏，而hidden的话呢，只是隐藏源代码，而不会隐藏构建后代码啊。这个呢是全部隐藏。这个呢，你可以理解为只隐藏构建后代吗？藏源代码。啊，会提示构建号代码错误。

这这个啊。所以呢，最终总结下来，你看就是开发环境下呢，我们可以简单的直接map，生环下呢就直接写map。好，所以这里面我们最终答案就是。因为我们是开发环境，所以这里面呢，可以用map去做。而将来呢，如果我们要做生产环境，那么我们只能先写，让调试呢，更加友好一些啊，更加友好一些。好了，那么这里面呢，就是我们所有的map，以及map相关的一些词呢，一些介绍。那么这里面呢，就是这个这个加上这个这三者呢，是可以任意组合的，但是我们要注意它的一个顺序关系啊，不要写写反了，不要写反。好了，那么这里面我们介绍好了这个map，一种提供代码到代码一个映射，帮我们追踪到代码的一个错误的一个这个技术。那么接下来呢，同学们可以自己去测试一下啊，自己可以测试一下，然后呢，自己感受一下这每一个东西之间，它到底有什么区别。