使用 webpack 模块手动测试

问题描述

这是我上一个问题的后续问题:

基本上，webpack 可以解决我在上一个问题中遇到的问题，但我想不出一种能够手动测试我的页面 javascript 文件的好方法.

Basically, webpack would solve the issue I am having in the previous question, but I can't figure out a good way to be able to manually test my pages javascript files.

当我第一次阅读 webpack 的功能时，我打算做以下事情:

When I first read what webpack does, I was planning to do the following:

1. 使用npm 依赖项，通过单个入口点的导入编写我的代码.
2. 在测试我的代码时，在 developement 版本中，我会将主模块文件加载到浏览器中，用于测试目的，这将导入依赖项(这是我遇到问题的地方)
3. 对于生产版本，我会将所有内容与 webpack 捆绑在一起，因此不支持 import 语句的浏览器仍然可以运行我的 javascript

1. write my code with imports with a single entry point, using npm dependencies.
2. while testing out my code, in developement version, I would load the main module file into the browser, for testing purposes, which would import the dependencies (this is where I am having a problem)
3. for production version, I would bundle everything with webpack, so browsers that are not supporting the import statement can still run my javascript

这个明显的问题(至少对我来说是显而易见的)是，如果我在我的 javascript 文件中做这样的事情:

The obvious problem with this (at least the obvious one to me), is that if I do something like this in my javascript file:

import jQuery from 'jquery';

浏览器不知道 'jquery' 代表什么，而 node 会处理得很好.

the browser will have no idea what does 'jquery' stand for, while node will handle this quite well.

选项 一个选项是，始终将我的文件与 webpack 捆绑在一起，即使是开发版本，但这会导致两个问题 imo:

OPTION An option would be, to always bundle my files with webpack, even for developement version but this would lead to two problems imo:

1. 如果没有自动化工具，它会变得非常乏味:每当我修改一个 .js 文件时，我都需要再次运行打包程序.我可以为这个问题找到解决方案，也许有一个自动监视工具，如果没有，我可以写一个.
2. 当我手动测试我的代码时，如果其中有错误，将很难找到浏览器抛出的错误并将其与我的实际未捆绑代码进行匹配.

是否有一种工具或方法可以让我使用从浏览器加载的 npm 模块，它可以像 node 一样解决导入问题，以便我可以按照我最初的三步计划来使用 javascript?

Isn't there a tool, or a method, with which I can use npm modules loaded from a browser, that would resolve the imports just like node does, so that I can follow my initial three step plan for working with javascript?

推荐答案

您可以使用 webpack 在开发环境中调试您的应用程序.Webpack 提供了一个观察器，可以在任何更改时重新捆绑您的源代码，根据记忆，命令是 --inline hot.对于关于 sourceMap 的第二个问题，webpack 为您提供了在捆绑时访问源代码的权限.

you can use webpack for debugging your application in development environment. Webpack provided a watcher to re-bundle your source code at any change, from memory the command is --inline hot. For your second problem search about sourceMap webpack provided you an access to your source code whenever it is bundled.

https://ehsangazar.com/source-maps-and-how-it-works-b3f93ca7ea5 => 关于 webpack sourcemap 的文章

https://ehsangazar.com/source-maps-and-how-it-works-b3f93ca7ea5 => article about webpack sourcemap

这篇关于使用 webpack 模块手动测试的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！