在不将 NPM 添加到项目的情况下生成 Javascript 源映射

Question

我的网络项目提供静态网页和脚本。根本没有进行任何预处理。所有更改都在客户端完成。

它有一个列出其他一些页面的主页。当用户单击 link 时，jQuery-UI 将加载关联的 HTML 页面和任何 linked Javascript/CSS 文件。

效果很好，让我们可以灵活地轻松 add/remove 新页面。问题是当我们想要调试加载的 JS 而浏览器似乎不知道它。

我花了一些时间了解 Source Maps，然后发现它们都适用于 Angular 和 React 等框架项目。

我们不希望在这个项目中出现这种情况。我们可以插入并重新加载的基本 HTML 和 JS。我意识到我们可能需要运行一个外部命令来生成源映射，但它必须是一个独立的工具——没有 NPM 或框架。

这是一个内部网络项目，因此 security/privacy 不是问题。我们希望客户在需要时查看源代码。

我知道有很多关于 JS 源映射的问题，但我发现的每一个问题都假设使用了一些框架工具。我们没有框架，也不想在这个项目中使用。

关于我们如何生成我们需要的源映射的任何建议，或者您知道调试通过 jQuery 加载的简单 JS 的任何替代方法吗？

Answer 1

首先，您不需要使用 Angular/React 来让 sourcemaps 工作。这些只是一个常见的用例。

其次，NPM 正是它所说的；包管理器。所以你也不需要 NPM。

您需要的是构建过程。你很清楚你不想缩小 js，但你确实想要 sourcemaps。这是用于调试js的常用配置，通常通过"building"或"Uglifying"禁用所有优化的代码来完成。

如果您愿意使用 Closure 编译器，您可能会完全避免 NPM，但那是一堆蠕虫，我建议您避免。

相反，我建议使用 Uglify* 全局安装*（每台开发机器）with NPM。这是一个 "once per machine" 步骤。

npm install uglify-js -g

*：希望这一边能够解决您的无 NPM 要求。我确实尝试过直接克隆 Uglify 存储库，但即便如此，您也需要获取它运行，为此，您至少需要使用 NPM 安装它的依赖项）。我很想被证明是错误的，但我认为这与此无关post。

然后使用它编写构建脚本。我试图在这里为您收集零件：

文件：gen-map.sh

#!/usr/bin/env bash

uglifyjs file1.js --config-file gen-map.json \
  -o file1.min.js  \
  --source-map "root='http://foo.com/src',url='file1.min.js.map'"

cat file1.min.js

文件：gen-map.json

{ 
  "compress": false,
  "output": {
    "beautify": true
  },
  "sourceMap": {
    "content": "content from file1.js.map",
    "url": "file1.js.map"
  }
}

文件：file1.js

var b = function() {
  console.log('b');
};

function c() {
  console.log('c');
};

console.log('a');
b();
c();
(function() {
  console.log('d');
})();

文件：file1.min.js

var b = function() {
    console.log("b");
};

function c() {
    console.log("c");
}

console.log("a");

b();

c();

(function() {
    console.log("d");
})();
//# sourceMappingURL=file1.min.js.map

文件：file1.min.js.map

 {"version":3,"sources":["file1.js"],"names":["b","console","log","c"],"mappings":"AAAA,IAAIA,IAAI;IACNC,QAAQC,IAAI;;;AAGd,SAASC;IACPF,QAAQC,IAAI;;;AAGdD,QAAQC,IAAI;;AACZF;;AACAG;;CACA;IACEF,QAAQC,IAAI;EADd","sourceRoot":"http://foo.com/src"}

*: Uglify-es 如果你使用的是 ES6 特性。

之后唯一要做的就是更新路径、文件名和实际脚本标签。使用此配置，您仍然必须提供 min.js 文件，尽管似乎 manually tagging 您的 JS 文件指向地图可能有效...

使用此配置，您需要在运行:

之前使构建的文件保持最新

./gen-map.sh

使用 npm 和 gulp 会更简单，但是，如果您不介意另一个包，我可以推荐 2 个通用的 "files been changed watchers"；

Nodemon:

 nodemon gen-map.sh

entr

 entr gen-map.sh

在不将 NPM 添加到项目的情况下生成 Javascript 源映射

Generate Javascript source map without adding NPM to project

javascript

jquery

jquery-ui

source-maps