生成source-map

  • 如何在使用webpack打包时生成对应的source-map呢？
  • 下面几个值不会生成source-map
    • false：不适用source-map，也就是没有任何和source-map相关的内容。
    • none : production模式下的默认值，不生成source-map。（什么值都不写）
    • eval : development模式下的默认值，不生成source-map
      • 但是它会在eval执行的代码中，添加//# sourceURL= ;但是它会在val执行的代码中，添加//#SourceURL=；
      • 它会被浏览器在执行时解析，并且在调试面板中生成对应的一些文件目录，方便我们调试代码;它会被浏览器在执行时解析，并且在调试面板中生成对应的一些文件目录，方便我们调试代码；
    • source-map：生成一个独立的source-map文件，并在生成的文件中有注释，指向source-map文件开发工具会根据注释找到source-map，并解析
    • eval-source-map：会生成sourcemap，但是source-map是以DatUrl添加到eval函数后面
      • 他会将sourcemap文件转换为base64形式直接加入到生成的js文件当中就相当于使用url-loader将图片转换为base64放在js代码里面
    • inline-source-map : 会生成sourcemap，但是source-map是以DataUrl添加到生成的js文件的后面
    • cheap-source-map：
      • 会生成sourcemap，但是会更加高效一些( cheap低开销），因为它没有生成列映射(Column Mapping )因为在开发中，我们只需要行信息通常就可以定位到错误了
    • cheap-module-source-map：会生成sourcemap，类似于cheap-source-map，但是对源自loader的sourcemap处理会更好。
    • hidden-source-map：控制map文件与源文件是否关联（ 少一行最后的关联注释 ）
    • nosources-source-map：会给你对应的报错提示，但是无法加载到源代码

source-map组合规则如下

  • inline-|hidden-|eval：三个值时三选一；
  • nosources：可选值
  • cheap 可选值，并且可以 加上module

[inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map
image.png

babel的基本使用

babel本身可以作为一个独立的工具（和postcss一样），不和webpack等构建工具配置来单独使用。（微内核）
如果我们希望在命令行尝试使用babel，需要安装如下库:

  • 先安装核心：npm install @babel/core -D
  • 如果想单独使用的话 就得安装 cli工具：npm install @babel/cli -D
  • 安装转换箭头函数插件：npm install @babel/plugin-transform-arrow-functions -D
  • 安装转换let,const插件：npm install @babel/plugin-transform-block-scoping
  • 使用： npx babel src —out-dir result —plugins=@babel/plugin-transform-arrow-functions,@babel/plugin-transform-block-scoping


Babel的预设

但是如果要转换的内容过多，一个个设置是比较麻烦的，我们可以使用预设(preset )

安装 @babel/preset-env预设：
npm install @babel/preset-env -D
执行命令：
npx babel src —out-dir dist —presets=@babel/preset-env

image.png
image.png