javascript - 使用 Browserify 时是否可以对浏览器中不同的 JS 文件进行故障排除?

标签 javascript browserify

我习惯于以旧方式处理 JavaScript 文件,每个 JS 文件都有自己的元素。例如:

<script src="foo.js"></script>
<script src="bar.js"></script>

旧方法的好处是在 Chrome 开发工具中我可以分析特定的 JS 文件。例如,如果发生错误,我知道要查看 bar.js。即使在生产中,因为我们不捆绑。

我正在研究使用 Browserify,但我找不到如何对使用 Browserify 捆绑的单个 JS 文件进行故障排除。

问题:使用Browserify时是否可以对浏览器中不同的JS文件进行故障排除?如果是,那么如何?

最佳答案

这个问题的答案是肯定的。以下是详细信息。假设你有2个JS文件:

// main.js
var unique = require('uniq');
var foo = require('./foo.js');

var data = [1, 2, 2, 3, 4, 5, 5, 5, 6];

console.log(foo(7));
console.log("works!");

console.log(unique(data));

// foo.js
module.exports = function (n) { return n * 111 }

使用以下命令生成捆绑文件及其映射文件:

browserify main.js --debug | exorcist bundle.js.map > bundle.js

在开发工具中,您将看到这一点(正如您所看到的,这两个文件是可调试的):

enter image description here

关于javascript - 使用 Browserify 时是否可以对浏览器中不同的 JS 文件进行故障排除?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25732796/

相关文章:

javascript - 返回上一页而不使用 jquery 刷新,而不是 angularjs

javascript - 引导切换开关显示为复选框

javascript - 如何让 browserify 的 "bundle"函数发出结束事件?

javascript - 尝试将类导出为模块 ES6 babel

javascript - 哪些浏览器会自动评估附加到文档的 &lt;script&gt; 标签?

javascript - Mustache.js 不工作

javascript - 如何使用箭头函数 setState 更改不在数组中的对象

javascript - Gulp 输出到多个文件而不是一个大文件?

javascript - 使 Browserify bundle 与 React DevTools 兼容

javascript - gulp-browserify 和 uglify.minify 有什么区别