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

Question

我正在尝试 edit/understand 用 ES6 编写的模态插件的源代码，link 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，这样是正确的方法还是我应该使用一些build带有源映射的版本来调试这个插件？

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

编辑 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();

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

Answer 1

就像您对任何其他 github 您想要贡献的托管代码一样：

克隆存储库 https://github.com/ghosh/micromodal
检查 package.json 或构建说明文档。

继续调查并做出贡献！

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

Development setup

Clone Github repo $ git clone https://github.com/ghosh/micromodal.git

Install yarn package manager (Read installation guide)

Run yarn install in the root folder to install all dependencies

Run yarn dev to start a dev server. This serves the example directory and live reloads when any files are changed

[Optional] Run yarn build to build the files for distribution. This is run automatically as a pre-commit hook as well.

Send us pull request and chill

https://github.com/ghosh/micromodal#development-setup

Answer 2

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

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

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

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

编辑以扩展之前的答案

我会在这里详细说明如何使用source-maps调试glide包，以及如何使用本地包进行开发，因为看评论你也想知道这个。 of-course 这里的 glide 只是一个例子，因为您想专门了解这个包，但这种方法可以用于任何其他包。

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

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

分叉 glide 包并将其克隆到您的电脑，并安装依赖项
在这里你可以使用任何使用滑行的例子，但我设置了一个例子， Fork/clone 以下 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安装

现在运行 npm star（在 parcel-glide 包中），您将看到示例运行ning，现在您对 glide 包所做的任何更改都应该直接在此处看到（在你执行 npm 运行 build in glide package 或使用 watch 之后）

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

现在在 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 运行构建，现在你可以访问开发工具中源代码面板中的所有文件，包括 glide 包的各个文件。

有不同类型的源地图，内联最准确但最慢，不同的选项会影响 build/rebuild 速度，你想选择最适合你的。

再次，这是我在第一次编辑中所写内容的总结，从浏览器的角度来看，它总是看到 js 文件，如果你想看看如何缩小、合并，trans-piled ，或者文件在处理之前是什么，您需要启用源映射，如何启用它们将取决于用于进行处理的工具（构建步骤）。这通常很容易，您只需添加一个属性指定您想要的源映射或者您是否想要。

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

How to debug the source of a modal plugin written in ES6?

javascript

ecmascript-6

webpack-4

编辑以扩展之前的答案