Articles of 源地图

gulp-sourcemaps保留中间文件

当我使用gulp-sourcemaps插件时,我通常会删除注释和内容,以便使用sourcemap标题。 这使得浏览器debugging器中的原始文件在开发和登台中显示起来更容易,然后在生产中将其删除。 我们也尽可能地加载源代码,主要是供应商库。 这大部分工作正常。 但是,中间文件似乎丢失了。 我猜loadMaps选项sourcemaps.init() ,它允许加载现有的地图,删除中间文件,当它获得他们的地图。 对于大多数情况来说,这可能是正确的,因为原始文件在那里,但是库往往只包含输出文件,其中映射添加为注释,但不包括那些原始文件。 这意味着我们无法访问原始文件,浏览器无法访问构build的库文件。 例如, angular-ui-router使用TypeScript编写,然后在生成时输出到JavaScript。 这意味着最终开发人员不必在他/她的构build过程中使用TypeScript进行编译,因为这已经在ui-router构build过程中完成了。 现在,可以通过<server root>/node_modules/@uirouter/angularjs/release/angular-ui-router.js访问输出的JavaScript文件,原始的TypeScript文件是根据构build文件的源代码注释在<server root>/node_modules/@uirouter/angularjs/node_modules/@uirouter/core/src和<server root>node_modules/@uirouter/angularjs/src文件夹。 当我使用我最喜欢的工具将angular-ui-router文件包含到vendor.js或vendor.min.js文件中时,它会将angular-ui-router映射捆绑到生成的.map文件中,但不包括<server root>/node_modules/@uirouter/angularjs/release/angular-ui-router.js文件作为源文件。 这意味着我们不能看到这个文件,或者TypeScript文件,这使得只使用浏览器几乎不可能进行debugging。 更糟的是,我们得到的任何错误都是源代码映射到TypeScript文件的。 我们没有TypeScript文件,所以我们不能看那里,现在我们不知道错误在JavaScript中的哪个地方! 谢天谢地, angular-ui-router并没有太多复杂的错误,而且它的确有很好的logging,但是其他的库并没有那么有用。 Is there a way to include intermediate files as sources in the output sourcemap? 否则,是否有一种简单的方法来加载一些像loadMaps东西,而不是其他人?

白名单与nodejs文件隐藏源代码

我最近把我的错误日志与getsentry.com集成在一起 。 现在我的问题是,我不得不生成一个源地图,所以基本上任何人用现代浏览器现在可以看到我的原代码完全评论。 我正在寻找一种方法来允许访问源映射文件只有特定的ips和/或nodejs的子网,因为我使用的是heroku。 我想它会涉及使用像https://www.npmjs.org/package/express-ipfilter或https://www.npmjs.org/package/ip 。 但是仍然想着如何创build一个“路由”到文件并评估ips的中间环节

meteorless源地图不会被加载到客户端

我尝试在我的项目中获得更less的源地图,但是他们似乎并没有传递给客户端。 > meteor –version > Release 0.8.1.3 > lessc –version > lessc 1.7.0 (LESS Compiler) [JavaScript] > less .meteor/packages |grep less > less > ls .meteor/local/build/programs/client > -rw-r–r– 1 mhhf staff 342679 Jun 6 13:05 473be00fc614aeff1b93b555c76b905fcc71e56b.css > -rw-r–r– 1 mhhf staff 463306 Jun 6 13:05 473be00fc614aeff1b93b555c76b905fcc71e56b.css.map > less .meteor/local/build/programs/client/program.json > … > { "path": "473be00fc614aeff1b93b555c76b905fcc71e56b.css", […]

在browserify期间,uglifying下划线打破了源代码映射

相关,但没有答案。 在我的NPM项目中,我public了以下文件夹: sourcemaps $ tree public/ public/ ├── index.html ├── js ├── bar.js ├── foo.js ├── main.js 在bar : 'use strict'; var go = module.exports = function () { return 'hey, I am bar'; }; 在foo : 'use strict'; var bar = require('./bar'); var go = module.exports = function () { console.log(bar()); }; main : […]

CSS编辑/压缩和Source Maps v3

有谁知道一个工具,将压缩/缩小/合并我的CSS文件,并产生可用于Chrome的有效的V3源地图? 最好是一个NodeJS工具。 我知道的节点的压缩机是干净的css,csso,css-condense(使用css-parse,但扼stream器在bootstrap.css)和cssmin(YUI端口,但没有CLI)。 这些似乎都没有源图支持。 我认为SASS(Ruby)和Less.js正在开发实现,但这些是预处理工具。

NodeJS 5.x + Babel 6asynchronous/等待debugging

当我尝试使用transform-async-to-generator babel插件(尽pipe我已经尝试几乎所有其他组合)尝试使用async / awaitdebugging代码时,我遇到了一些棘手的debugging体验。 基本上,一个await的代码会跳到方法的末尾,然后进入编译的代码。 video export class Cat { async meow(){ let p = await this.bat(); // <<<< this line runs this.fart(); // <<<< then skips this line return p; // <<<< and goes to this line ( always last line in fn ) } } 如果您查看该函数的生成代码: meow() { var _this = this; return […]

WebPack源地图混淆(重复的文件)

我决定尝试一下我今天轮到的一个新项目WebPack,我从源代码中得到了非常奇怪的行为。 在文档中找不到任何关于它的内容,在浏览StackOverflow时也不能find其他人。 我目前正在查看由Vue-CLI的WebPack模板生成的HelloWorld应用程序 – 没有对代码,构build环境或其他任何内容进行更改。 我安装了一切,像这样运行: vue init webpack test && cd test && npm install && npm run dev 看看我的源代码,我看到以下内容: 这是一个混乱。 为什么有三个版本的HelloWorld.vue和App.vue ? 更糟糕的是,每个版本都有一个稍微不同的代码版本,没有一个匹配原始源代码。 坐在根目录下的HellowWorld.vue与原始的源代码相匹配,但它在那里做什么,而不是在./src/components文件夹中? 最后,为什么没有第四个App.vue有它的原始来源? 据我所知,这可能与WebPack装载机有关。 不过,我从来没有得到任何其他打包机的这类问题。 以下是使用Browserify Vue-CLI模板完全相同步骤的示例: 没有webpack:// schema,每个文件只有一个副本,这些文件实际上包含了原始的源代码 (对于源地图很重要),没有意外的(webpack)/buildin或者(webpack)-hot-middleware ,没有. 子目录,….只是源代码。

在WebStorm中debugging编译ES6 nodejs应用程序

我想debugging一个从babel编译的ES6文件运行的节点应用程序。 我有一个src文件夹中的ES6源代码和buildel文件夹中的babel ES5等价物。 Project root | | build | > ES5 Compiled files | | src | > ES6 Source files 我的目标:直接在我的ES6源代码中放置断点。 我已经生成了适当的源映射,并且我创build了一个节点debuggingconfiguration,该configuration运行ES5主文件,并将项目根设置为工作目录。 当我在ES5编译文件中设置断点时,可以中断,并自动显示我的ES6源代码。 不过,我想直接在ES6源代码中放置断点 。 这甚至可能吗? – > 2015-10-11编辑< 当我使用绝对的sourceRoot时,源映射现在可以在@ mockaroodev的configuration下 sourceRoot ! 然而 ,debugging仍然是打破:有时候会把我带到意想不到的地方。 似乎当该行暗含非内部(非本地) require时,debugging器将在所需内容结束时中断。 这是非常烦人的! 我在Linux上使用Webstorm 10.0.4,并将babel和sourcemaps升级到最新版本。 有人也遇到这个问题吗?