Javascript 如何调试ES6中编写的模式插件的源代码？

我正在尝试编辑/理解一个用ES6编写的模态插件的源代码，link

我像这样初始化插件：

JS文件（main.JS）

现在，如果我想调试插件的源代码，我直接编辑

/src

文件夹中的

index.js

，这是正确的方法还是应该使用一些带有源代码映射的构建版本来调试插件

编辑：-这不是关于如何调试ES6插件的一般问题，请考虑该插件使用了Thread、web pack、rollupjs，问题是如何与这些工具一起调试该插件

编辑2:：-我再次遇到同样的问题，这一次，我试图调试一个名为的插件

当然，我可以像这样使用插件：

<div class="glide">
    <div data-glide-el="track" class="glide__track">
        <ul class="glide__slides">
        <li class="glide__slide">
            <img src="img/1.jpg" alt="">
            <span>Slide 1</span>
        </li>
        <li class="glide__slide">
            <img src="img/2.jpg" alt="">
            <span>Slide 2</span>
        </li>
        <li class="glide__slide">
            <img src="img/1.jpg" alt="">
            <span>Slide 3</span>
        </li>
        </ul>
    </div>
</div>

---

我的滑块可以工作，但我真正想做的是调试

src/

文件夹中的代码，我该怎么做呢？

就像您对任何其他github托管代码所做的一样：

克隆位于的存储库

检查package.json或文档中的构建说明

继续调查和贡献吧

自述文件中甚至有详细描述：

开发设置

• 克隆Github repo

  $git Clonehttps://github.com/ghosh/micromodal.git

• 安装纱线包管理器（请阅读安装指南）
• 在根文件夹中运行

  warn install

  ，安装所有依赖项
• 运行

  dev

  启动dev服务器。这为示例目录提供服务，并在更改任何文件时实时重新加载
• [可选]运行

  warn build

  以生成要分发的文件。这也是作为预提交钩子自动运行的
• 给我们发拉请求，冷静一下

---

不管构建步骤是什么，您总是要在HTML文档的头部导入一个脚本，这个脚本就是浏览器正在运行的脚本，这是事实的来源，调试这个脚本与调试任何其他脚本没有什么不同

当开发人员开始捆绑和缩小他们的js文件时，调试这些js文件变得非常困难，这就是为什么浏览器提供了一个称为源映射的功能，源映射使您能够像调试独立脚本一样调试脚本，即使它可以被缩小、合并和传输

是否为特定脚本包含sourcemaps将取决于设置/生成。通常，您希望在开发中使用这些，但不希望在生产中使用它们

例如，下面是sourcemaps的网页包配置

---

编辑以展开上一个答案 我将在这里详细解释如何使用源代码映射调试glide包，以及如何使用本地包进行开发，因为从评论中可以看出，您也希望了解这一点。当然这里glide只是一个例子，因为您想知道这个包的具体情况，但是这个方法可以用于任何其他包

使用本地包进行开发将使您能够调试代码，而无需转到节点模块中dist文件夹中的index.js文件

使用源地图将使您能够逐行查看原始文件

• 分叉glide软件包并将其克隆到您的pc，然后安装依赖项
• 在这里，你可以使用任何使用glide的例子，但我举了一个例子， 分叉/克隆以下repo，并安装依赖项
• 现在让我们假设您想在glide包中做一些更改，并且希望在发布/或执行pull请求之前测试这些更改，而无需针对本地版本进行开发—这可能非常耗时
• 现在为了使用本地包有很多方法，因为现在我们使用的是最简单的方法，即使用绝对路径安装包（我在这里假设您使用与使用绝对路径安装包兼容的新npm版本）。转到parcel glide中的package.json文件并进行更改

然后运行npm/纱线安装

现在运行npm star（在包glide包中），您将看到示例正在运行，您现在对glide包所做的任何更改都应该直接在这里看到（在您运行npm后，在glide包中运行build或使用watch，如果您愿意）

在glide包的index.js中添加一个控制台语句，以确保一切正常（然后使用npm运行构建进行构建）。 -现在，如果你去看这个例子，你会发现我们有一个巨大的glide js文件，我们在sources文件夹中无法访问glide包中的所有文件，例如src/components中的文件。为了获得此访问权限，我们需要添加源地图

现在在glide包中转到build/build.js并进行更改

import banner from './banner'
import babel from 'rollup-plugin-babel'

export default {
  output: {
    name: 'Glide',
    banner
  },
  plugins: [
    babel({
      plugins: [
        'external-helpers',
        'transform-object-assign'
      ]
    })
  ]
}

To 

import banner from './banner'
import babel from 'rollup-plugin-babel'

export default {
  output: {
    name: 'Glide',
    banner,
    sourcemap: "inline"
  },
  plugins: [
    babel({
      plugins: [
        'external-helpers',
        'transform-object-assign'
      ]
    })
  ]
}

运行npm Run build，现在您可以访问dev工具中sources面板中的所有文件，包括glide包的各个文件

有不同类型的源地图，内联地图最精确，但速度最慢，不同的选项会影响生成/重建速度， 你要选择最适合你的

---

同样，这是我在第一次编辑中所写内容的总结，从浏览器的角度来看，它总是可以看到js文件，如果您想看到一个文件是如何缩小、组合、转换的，或者在处理之前是什么样的，您需要启用源地图，如何启用它们将取决于处理时使用的工具（构建步骤）。这通常很简单，您只需添加一个属性，指定您想要的源映射或是否想要。这听起来像是XY问题。您需要调试源代码的原因是什么？@connexo要为插件贡献力量如果您只想调试，我会按照您的建议执行：

<div class="glide">
    <div data-glide-el="track" class="glide__track">
        <ul class="glide__slides">
        <li class="glide__slide">
            <img src="img/1.jpg" alt="">
            <span>Slide 1</span>
        </li>
        <li class="glide__slide">
            <img src="img/2.jpg" alt="">
            <span>Slide 2</span>
        </li>
        <li class="glide__slide">
            <img src="img/1.jpg" alt="">
            <span>Slide 3</span>
        </li>
        </ul>
    </div>
</div>

import Glide from '../dist/glide.esm.js';

new Glide('.glide').mount();

"@glidejs/glide": "sanehab/glide"

To

"@glidejs/glide": "absolute path for glide package on your system"

import banner from './banner'
import babel from 'rollup-plugin-babel'

export default {
  output: {
    name: 'Glide',
    banner
  },
  plugins: [
    babel({
      plugins: [
        'external-helpers',
        'transform-object-assign'
      ]
    })
  ]
}

To 

import banner from './banner'
import babel from 'rollup-plugin-babel'

export default {
  output: {
    name: 'Glide',
    banner,
    sourcemap: "inline"
  },
  plugins: [
    babel({
      plugins: [
        'external-helpers',
        'transform-object-assign'
      ]
    })
  ]
}