问题标签 [javascript-build]

任何人都知道会自动连接凉亭依赖的 gulp 插件吗？

我想找到同时处理标准脚本标签和 require.js 语法的插件。

这与 grunt 的插件完全一样：

grunt-wiredep

使用 Grunt 将 Bower 组件直接注入到 HTML 中。

grunt-bower-requirejs

自动将已安装的 Bower 组件连接到您的 RequireJS 配置中。

（来自凉亭网站：http ://bower.io/docs/tools/ ）

或者如果没有，对实现这一目标的最佳方法有什么建议吗？

我的应用程序有数千个 Javascript 文件。在我们的构建过程中，我们：

1. 丑化源（缩小+连接）
2. 将第 3 方 Javascript 库连接到一个大文件中。

结果是一些巨大的 .js 文件，每个大约 1.5MB。这些文件最终由浏览器缓存。

好处是减少了客户端-服务器通信。

这么大的文件对浏览器的脚本解析和执行有什么影响？浏览器是否期望如此大的文件，或者创建较小的文件会更好的性能？

我需要单独的 lodash 模块，所以我的 JS 构建只包含我需要的 lodash 代码（例如import map from 'lodash/map'，而不是import _ from 'lodash'. （实际上，我正在使用babel-plugin-lodash来自动化它。）所以我实际上在代码中没有导入整个'lodash'.

我希望 webpack 将任何需要包含在供应商捆绑包中的 lodash 代码。按照用于拆分供应商和应用程序包的 webpack 示例，我知道如何在供应商包中包含所有lodash（使用 CommonsChunkPlugin）。但我不想仅仅'lodash'用作入口点并拉入整个库。相反，我想让我实际导入的所有模块都lodash以在供应商捆绑包中结束。

有任何想法吗？

添加

由于我为每个应用程序构建了 3 个包，情况变得更加复杂：一个供应商包、一个应用程序通用的东西包（将使用 lodash 模块）和特定于应用程序的代码（也将使用 lodash 模块） .

以下是我的 webpack 配置的关键部分：

我有一个相对标准的 webpack 设置：webpack + babel-stage-0

如果有语法错误，babel 会给我一个非常有用的错误消息，但还有一个与我的代码完全无关的堆栈跟踪，它通常比终端本身长。

有没有办法隐藏堆栈跟踪Parser.pp.raise

我知道这是一件非常小的事情，但是隐藏堆栈跟踪将意味着更少的视觉噪音，而且我不必向上滚动半个终端窗口来查看我的错误消息。

我尝试过的事情

我尝试使用以下命令隐藏 stderr：

但这似乎没有帮助。

我一直在慢慢地将 gulp 集成到我的解决方案中。我正在使用盒式磁带来管理依赖项，现在我有 gulp 运行 bower，将缩小的文件复制到引用它们的源目录（不想真正破坏旧的引用），现在我需要手动插入适当的盒式磁带使用 /// 引用每个文件的顶部，我不知道如何使用 Gulp 来做。我知道使用 gulp-insert 执行此操作并使用 prepend 函数可能是最简单的。我还有一组文件及其依赖项要循环通过。在这里吞咽很新，所以要温柔，让我知道是否有其他方式我应该构建它。

依赖数组如下所示：

我想我需要对 Vinyl 做一些事情来将文件传递到流中，但这对我来说仍然有点困惑。

谢谢。

我已经看到它在 http/2 的解释中随便提到，捆绑 JS 文件之类的技术将不再是必需的，并且是绕过 http 1.1 限制的反模式。

仔细想想，似乎问题并没有因为存在服务器推送而变得容易得多。现在我们有像 webpack 这样的工具，它构建了require()s 或 ES6的依赖图，import然后将它们组合成一个文件。好消息是这会生成一个可以从 CDN 提供的静态文件。

在 http/2 中，您仍然需要构建图的初始步骤，以便您知道服务器推送到客户端的内容。如果您在服务器上动态执行此操作，则无法从 CDN 提供服务。您可以在构建时解析 js 图并将它们全部作为脚本标签放在 index.html 的底部，并且网络服务器可以知道服务器推送这些资源（尽管我认为您需要某种浏览器支持来整合那与requires 在代码中？）。但是，如果您的 html 不是由 CDN 提供的，那将无法正常工作。而且由于您在任何页面加载时都传递了每个文件，因此与单个捆绑包相比，这似乎没有什么好处。我想你可以为不同的关键路线构建其中的一些，但这与在 webpack 中构建多个包没有什么不同，你如何转换到应用程序的另一个可能尚未下载的部分？

最重要的是，您很可能仍然有一个静态资源构建步骤，例如最新 js 功能的浏览器兼容性、sass 类型 css 编译、以@1x 和@2x 分辨率保存图标等. 所以，当前的 webpack 风格的编译 js 包的方法似乎还有很多其他的好处，而且目前还不清楚 http/2 server-push 如何真正帮助它。

我错过了什么？通过 http/2 server-push 为 js 提供服务还有其他我没有想到的好处吗？关于在 http/2 上提供 js 应用程序的计划，是否有人提供专家资源或流行 Web 框架的资源链接？

我正在尝试编写一个 webpack 插件，该插件将进入包含 html 文件的目录，打开每个文件，删除新行，并生成一个对象作为静态属性附加到我的输出文件（这是一个 var）。

该对象看起来像：

然后我希望它附加到我的输出中，例如：

对象的创建完成。我只是在努力使用 webpack 并弄清楚如何将它附加到主要对象。我应该将它写入磁盘并要求它吗？或者有没有办法通过插件将它添加到包中？

我正在使用 Rivets.js 作为模板引擎，但我还没有找到任何可以做这样的事情的东西。

另外值得注意的是，我使用的只是 webpack 和 npm。没有咕噜声/吞咽/等

非常感谢！麦克风

如何从 webpack 的代码拆分中受益，同时将所有代码合并到一个入口点？假设我的切入点如下：

这将创建多个入口点，所有入口点都需要在主应用程序本身之前加载到页面中（如 babel polyfills、运行时、供应商块......）。

如何指示 webpack 以便只需要将单个script标签注入页面，然后懒惰地拉出它需要的所有块？

这将简化在运行时将库注入应用程序 - 更容易从后端仅发送单个脚本位置，而不是多个（并确保保留正确的顺序）。

我什么都试过了。

1. 删除node_modules和yarn.lock
2. 降级的尖锐插件
3. apt 安装 libvips && libvips-dev
4. $ npm install -g node-gyp

在安装 libvips-dev 之前。构建错误是因为找不到 libvips 造成的。现在 apt-get 安装 libvips-dev 后，找不到 glib-object。我不知道该怎么办。

这是错误消息的有用位：

有什么帮助吗？

所以我下载了lodash源代码。我注意到它是使用导入/导出以 Es6 语法编写的。

我还看到了 lodash.js，它采用立即调用函数 (IIFE) 的形式。在某种将 ES6 模块化代码转换为 IIFE 的构建过程之后，所有内容都组合在一个文件中。

经过进一步研究，看起来 lodash.js 是使用 loadash cli 生成的。

问题： LoDash cli 是否使用 babel 之类的工具进行转换，或者它具有非常特定的自定义逻辑来解析 es6 文件并输出暴露“_”全局对象的 IIFE 函数？