javascript - 如何调试用 ES6 编写的模态插件的源代码？

Question

我正在尝试编辑/理解用 ES6 编写的模态插件的源代码，链接 HERE .

<div aria-hidden="true" class="modal micromodal-slide" id="modal-1">
    <div class="modal__overlay" data-micromodal-close="" tabindex="-1">
        <div aria-labelledby="modal-1-title" class="modal__container" role="dialog">
            <header class="modal__header">
                <h2 class="modal__title" id="modal-1-title">Micromodal</h2>
                <button aria-label="Close modal" class="modal__close" data-micromodal-close=""></button>
            </header>


            <main class="modal__content" id="modal-1-content">
                <p>Try hitting the <code>tab</code> key and notice how the focus stays within the modal itself. Also, <code>esc</code> to close modal.</p>
            </main>


            <footer class="modal__footer">
                <button class="modal__btn modal__btn-primary">Continue</button> <button aria-label="Close this dialog window" class="modal__btn" data-micromodal-close="">Close</button>
            </footer>
        </div>
    </div>
</div> 

// Button that triggers the modal
<a data-micromodal-trigger="modal-1" href="#">Toggle</a>

// I am importing the source code for the plugin here 
<script type="module" src="src/index.js"></script>

// File where i initialize the plugin
<script type="module" src="src/main.js"></script>

我像这样初始化插件:

JS文件(main.js)

import MicroModal from './index.js';

MicroModal.init();

现在如果我想调试插件的源码，直接编辑/src文件夹下的index.js，这样对吗还是我应该使用一些带有源映射的构建版本来调试这个插件？

EDIT::- 这不是关于如何调试 ES6 插件的一般问题，请考虑到该插件使用 yarn、web pack、rollupjs，问题是如何调试它与这些工具串联的插件。

EDIT 2::- 我再次遇到同样的问题，这一次，我正在尝试调试一个名为 Glide.js 的插件。 .

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

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

初始化JS代码:

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

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

我的 slider 可以工作，但我真正想做的是调试 src/ 文件夹中的代码，我该怎么做呢？

Answer 1

无论构建步骤如何，您总是会在 HTML 文档的头部导入一个脚本，这个脚本是浏览器正在运行的脚本，这是真实的来源，调试这个脚本是没有的不同于调试任何其他脚本。

当开发人员开始打包和缩小他们的 js 文件时，调试这些 js 文件变得非常困难，这就是为什么浏览器提供了一个称为源映射的功能，源映射使您能够调试脚本，就像它是独立的一样，即使它本可以在此过程中被缩小、组合和转译。

某个脚本是否包含源映射将取决于设置/构建。通常您希望在开发中使用这些，但不希望在生产中使用它们。

例如，这里是 sourcemaps 的 webpack 配置 https://webpack.js.org/configuration/devtool/#devtool

---

编辑以扩展之前的答案

我将在这里详细解释如何调试glide包，使用source-maps，以及如何使用本地包进行开发，因为从评论中你也想知道这个。当然这里的 glide 只是一个例子，因为你想具体了解这个包，但这种方法可以用于任何其他包。

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

使用源映射将使您能够逐行查看原始文件。

• fork glide 包并将其克隆到您的电脑上，并安装依赖项
• 在这里你可以使用任何使用滑行的例子，但我设置了一个例子， fork /克隆以下 repo https://github.com/sanehab/parcel-glide ，并安装依赖项
• 现在假设您想在 glide 包中做一些更改，并且您想在发布/或执行拉取请求之前测试它们，而不针对本地版本进行开发，这可能非常耗时。
• 现在为了使用本地包有很多方法，现在我们使用最简单的方法是使用绝对路径安装包(我在这里假设你使用一个新的 npm 版本与使用绝对路径安装包兼容)。转到 parcel-glide 中的 package.json 文件并更改

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

To

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

然后运行 ​​npm/yarn install

现在运行 npm star(在 parcel-glide 包中)，您将看到示例正在运行，现在您对 glide 包所做的任何更改都应该直接在这里看到(在您在 glide 包中执行 npm run build 或使用 watch if 之后你想要的)

将控制台语句添加到 glide 包中的 index.js 以确保一切正常(然后使用 npm run build 构建)。- 现在如果你转到这个例子，你会看到源代码，你会发现我们有一个巨大的 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 现在你可以在开发工具的源代码面板中访问所有文件，包括 glide 包的各个文件。

有不同类型的源 map ，内联最准确但最慢，不同的选项会影响构建/重建速度，你想选择最适合你的。

同样，这是我在第一次编辑中也写的内容的总结，从浏览器的 Angular 来看，它总是看到 js 文件，如果你想看看如何缩小、组合、转堆等等在处理文件之前，您需要启用源 map ，启用它们的方式将取决于用于进行处理的工具(构建步骤)。这通常很容易，您只需添加一个属性来指定您想要或是否需要的源映射。