npm 包 webpack-blocks-server-source-map 使用教程

AI 编程助手，豆包旗下的编程助手，提供智能补全、智能预测、智能问答等能力，节省开发时间，释放脑海中的创造力，支持 VSCode，点击体验 AI

如果你是前端工程师，那么你一定清楚进行源代码调试是非常重要的。最好的调试方式就是使用 source map。然而，在部署到生产环境时，你不希望暴露源代码。webpack 提供了一个功能叫做 source map 的东西，可以帮助你实现这个目标。

现在，我们来介绍一个 npm 包叫做 webpack-blocks-server-source-map，它允许你在 server 端创建源代码 map。这个包的使用方法非常简单，但是需要一些基础知识。在本文中，我们将提供使用实例和步骤。

安装

使用 npm 安装 webpack-blocks-server-source-map：

--- ------- -------------------------------- ----------

由于 webpack-blocks-server-source-map 依赖于 webpack 4，所以需要确保你已经安装了 webpack 4。

使用

  1. 配置 webpackBlock：
----- - ------------ - - -----------------------------------
----- --------------- - -------------------------------------------

----- ------------- - --------------
  -----------------
    ------------ -------
  --
--

上面的配置将会生成一个源代码 map 文件。你需要将源代码 map 文件和编译好的文件放在相同的目录。例如：

------
----------

一般情况下，app.js.map 文件会在编译时自动生成。你可以在命令行使用 --devtool source-map 来生成 source map 文件。

  1. 启用 source map

在 server 端启用 source map 非常简单。只需要使用 createSourceMapMiddleware、serveSourceMapMiddleware 和 middlewareChain 这些函数，它们都是从 webpack-blocks-server-source-map 包中导出来的。

例如，在 Express 中使用 source map：

----- ------- - ------------------
----- - -------------------------- ------------------------- --------------- - - -------------------------------------------

----- --- - ---------
----- ---- - ----

-- ---- --- ---- ---- ----

------------------------
  ----------------------------
  ---------------------------
--

---------------- -- -- -
  ------------------- --------- -- --------------------------
--

启动服务器并通过浏览器访问，你将会看到 source map 的效果。

示例代码

以下是一个例子，它使用 webpack-blocks-server-source-map 根据传入的 template 文件动态生成 HTML。

----- ---- - ---------------
----- ------- - ------------------
----- ------- - ------------------
----- ------------- - ---------------------------------
----- ------------- - ---------------------------------
----- - ------------ - - -----------------------------------
----- ----- - ---------------------------------
----- --------- - --------------------------------------
----- ----------- - ----------------------------------------
----- ---- - -------------------------------
----- ---- - -------------------------------
----- - -------------------------- ------------------------- --------------- - - -------------------------------------------

----- ---- - ----
----- ------------- - -------------------- --- ------------

----- ---------- - --------------
  --------
  -------
  ------
    ------- -----
    --------- -------------------- --------- --------------
  ---
--

----- ----------------- - --------------
  ------------
  ---------------
    ----------- ----
    ------ ----------
    ---- -----
  ---
  ----------------
  --------------
--

----- ---------------- - --------------
  --------------
--

----- ------------- - -------------
  - ------------------------- -------------------
  - ------------------------- ------------------

-- --------------- -
  ---------------------------
    --- ------------------------------------
  -
-

----- --- - ---------

-- ----- ------
-- --------------- -
  ----- -------- - ----------------------
  --------------------------------
  --------------------------------
- ---- -
  ------------------------------------------- ---------
-

-- ----- ------ ---
------------------------
  ----------------------------
  ---------------------------
--

------------ ----- ---- -- -
  --------------------------------- --------- --------------
--

---------------- -- -- -
  ------------------- --------- -- --------------------------
--

总结

通过使用 webpack-blocks-server-source-map，你可以非常方便地为 server 端启用 source map。即使对于一些不熟悉 node.js 和 webpack 的开发者，这个过程也是非常简单的。希望本文能够帮助你更好地理解和使用 webpack-blocks-server-source-map。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055c0a81e8991b448d9aa8

阅读全文

猜你喜欢

  • npm 包 promycycle 使用教程

    前言 promycycle 是一个能够对 Promise 进行生命周期监听的 npm 包。它提供了许多有用的监听函数，如 before, after, resolve, reject 等等。

    2 年前
  • npm 包 frank-node-redis 使用教程

    简介 Redis 是目前应用比较广泛的 NoSQL 数据库之一，它具有高并发，高性能的特点。而 frank-node-redis 是一个基于 Node.js 的 Redis 客户端库，我们可以用它来方...

    2 年前
  • npm 包 vue-style2的使用教程

    前言 在前端开发中，经常需要使用 CSS 样式来美化页面。但是随着项目规模的增大，样式代码也会变得越来越臃肿，可维护性差。为了解决这个问题，诞生了 CSS in JS 技术。

    2 年前
  • npm 包 frank-node-weixin 使用教程

    前言 随着微信开放了公众号的开发接口，越来越多小程序和企业开始使用微信公众号作为营销及媒介平台。在使用微信公众号开发时，需要与微信服务器进行通信，此时可以使用第三方的 node.js 库 frank-...

    2 年前
  • npm 包 react-verify-code 使用教程

    如果你正在开发一个需要用户验证的 Web 应用，那么验证码功能一定是必不可少的。而 react-verify-code 就是一个可以帮助你在 React 应用中实现验证码功能的 npm 包。

    2 年前
  • npm 包 react-native-speech-baidu 使用教程

    1. 前言 在 React Native 开发中，语音识别与语音合成功能是常见的需求。React Native Speech Baidu 是一款基于百度语音 API 的语音识别和语音合成工具库，支持 ...

    2 年前
  • npm 包 chooie-hello-world 使用教程

    简介 npm 是 JavaScript 开发者不可或缺的工具，它存放了数以百万计的 JavaScript 包。chooie-hello-world 即是其中一个 npm 包，用于在前端页面上显示“He...

    2 年前
  • npm 包 hopp-babel 使用教程

    在前端开发中，我们经常需要对 ES6+ 的代码进行转换成 ES5 代码以支持大多数浏览器。在这个过程中，我们可以使用 Babel 来进行转换。然而，每次手动运行 Babel 转换非常麻烦，因此我们可以...

    2 年前
  • npm 包 id3-meta 使用教程

    1. 前言 在前端开发中，我们可能需要处理一些音频文件。id3-meta 是一个能够解析 MP3 文件 ID3 标签的 npm 包。在本篇文章中，我们将介绍使用 id3-meta 的方法以及在处理音频...

    2 年前
  • npm 包 clickup-gremlins.js 使用教程

    什么是 clickup-gremlins.js？ clickup-gremlins.js 是一个基于 Gremlins.js 的 npm 包，用于在 ClickUp 系统中进行基于随机性质的测试。

    2 年前
  • npm 包 tinyservice 使用教程

    什么是 tinyservice tinyservice 是一个基于 HTTP 协议的微型本地服务框架，可用于加速本地前端开发和测试。使用 tinyservice，可以轻松地在本地创建一个简单、易用的服...

    2 年前
  • npm 包 class-inject 使用教程

    class-inject 是一个优秀的 npm 包，它能够在 JavaScript 中动态添加或移除 CSS 类名。这个包非常实用，因为在前端开发中，我们经常要改变元素的 CSS 类名来达到一些效果，...

    2 年前
  • npm 包 testing-publish 使用教程

    在前端开发过程中，我们经常会使用到 npm 包来优化我们的项目。而测试是一个非常重要的环节，它可以提高我们代码质量，减少潜在的错误。在这篇文章中，我们将介绍 npm 包 testing-publish...

    2 年前
  • npm 包 find-most-similar 使用教程

    npm 包 find-most-similar 使用教程 在前端开发中，我们经常会需要比较两个字符串的相似度，以便进行一些相关操作，例如文本搜索、拼写纠正等。在这种情况下，npm 包 find-mos...

    2 年前
  • npm 包 webpack-butternut-plugin 使用教程

    前言 在前端开发中，构建工具是非常重要的。Webpack 是一个强大的构建工具，它提供了许多插件来优化构建过程。其中，webpack-butternut-plugin 就是一个用于压缩 JavaScr...

    2 年前
  • npm 包 crazy-select 使用教程

    介绍 crazy-select 是一个基于 Vue.js 的前端组件库，用于创建用户友好的下拉选择框。它可以处理多级联动选择，支持搜索和筛选，样式可定制化。配合 npm 使用，可以在项目中轻松集成。

    2 年前
  • npm 包 react-vimeo-player 使用教程

    React-vimeo-player 是一个用于在 React 应用程序中嵌入 Vimeo 视频的 npm 包。它允许您在应用程序中快速轻松地嵌入 Vimeo 视频，并提供简单的 API 来处理视频播...

    2 年前
  • npm 包 logger-life 使用教程

    在前端开发过程中，不可避免地要记录日志。日志记录可以帮助我们快速定位问题、调试代码，同时也是开发中的一项重要的管理工作。而 logger-life 是一个轻量级的 npm 包，可以方便地在前端项目中进...

    2 年前
  • npm 包 node-caching 使用教程

    #npm 包 node-caching 使用教程 ##概述 Node-caching是一个基于Node.js的缓存库，可以将数据缓存在内存或者磁盘上，提高应用程序性能。

    2 年前
  • npm 包 botbuilder-facebookextension 使用教程

    前言 Bot Builder 是一个优秀的机器人框架，它支持微软的 Bot Framework， Facebook Messenger、Slack 和其他聊天平台。

    2 年前

相关推荐

    暂无文章