小编dav*_*ark的帖子

我正在尝试使用grunt-contrib-livereload,但似乎无法弄明白.自述文件似乎跳过了我需要解释的所有内容,然后以我尝试它并且与文档似乎没有直接关系的示例结束.我在博客文章或教程或其他方面寻找了更好的解释,但一直未能找到.有人可以解释如何开始使用这个工具吗？

基于自述文件,我有以下几种问题:

文档说livereload任务"必须传递已更改的文件列表"---但是如何将这个文件列表传递给它？这个例子似乎没有说明这一点.regarde是否通过了清单？

是否需要grunt-contrib-connect？它做了什么,我该如何使用它？在尝试使用livereload之前,我是否需要学习连接？

自述文件提到中间件"必须是插入的第一个" - 但是在其他之前插入了什么？它是如何插入的？

而且我想我不明白我是如何操纵端口的."将重新加载监听livereload端口的所有浏览器"---但我如何知道哪个浏览器正在侦听哪个端口？在尝试使用livereload之前,是否需要了解所有端口？(关于如何最好地了解这一点的任何建议？)

最后,在该示例中,有一个folderMount函数似乎与以前的任何文档都没有关系.那是什么,我需要它吗？

我猜我在问是否有人可以取悦:

• 指向一个比当前自述文件更有效的教程;
• 解释自述文件的这些无法解释的部分,如果这些答案是我需要理解的插件;
• 或者提供一个功能性的例子,说明它为何起作用.

我在使用RequireJS的网站上有多个页面,并且大多数页面都具有独特的功能.它们共享许多通用模块(jQuery,Backbone等); 所有这些都有自己独特的模块.我想知道使用r.js优化此代码的最佳方法是什么.我看到了RequireJS和Almond的文档和示例的不同部分提出的一些替代方案 - 所以我想出了以下我看到的可能性列表,我问最推荐哪一个(或者是否有另一种更好的方法) :

1. 使用Almond 优化整个站点的单个JS文件,该文件将加载一次然后保持缓存.这种最简单的方法的缺点是我将加载到用户不需要该页面的每个页面代码(即特定于其他页面的模块).对于每个页面,加载的JS将比它需要的更大.
2. 为每个页面优化单个JS文件,其中包括公共模块和特定于页面的模块.这样我就可以在每个页面的文件中包含Almond,并且只会在每个页面上加载一个JS文件 - 这将比整个站点的单个JS文件小得多.不过我看到的缺点是普通模块不会在浏览器中缓存,对吧？对于用户访问的每个页面,她必须重新下载大量的jQuery,Backbone等(通用模块),因为这些库将构成每个唯一的单页JS文件的大部分.(这似乎是RequireJS多重示例的方法,除了示例不使用Almond.)
3. 为常用模块优化一个JS文件,然后为每个特定页面优化另一个JS文件.这样,用户可以缓存公共模块的文件,并且在页面之间浏览只需要加载一个特定于页面的小文件.在这个选项中,我看到了两种完成它的方法,包括RequireJS功能:a.使用data-main语法或普通<script>标记在所有页面上的公共模块之前加载文件require.js - 根本不使用Almond.这意味着每个页面将有三个JS文件:require.js,通用模块和特定于页面的模块.湾 看起来这个要点建议将Almond插入每个优化文件的方法----所以我不必加载require.js,而是在我的常用模块和我的页面特定模块中包含Almond.是对的吗？这比提前加载require.js更有效吗？

感谢您提供的任何建议,以便最好地实现这一目标.

假设我想替换一堆文件中的版本号,其中许多文件存在于子目录中.我将通过gulp-replace管道文件来运行regex-replace函数; 但我最终会想要覆盖所有原始文件.

任务可能如下所示:

gulp.src([
    './bower.json',
    './package.json',
    './docs/content/data.yml',
    /* ...and so on... */
  ])
  .pipe(replace(/* ...replacement... */))
  .pipe(gulp.dest(/* I DONT KNOW */);

那么我怎样才能结束它,以便每个src文件在原始位置覆盖自己？有什么我可以传递到gulp.dest()这将做到这一点？

假设我想在我的项目(或任何给定的npm包)中使用Immutable.我npm install编了它,所以它在node_modules.当然,它有CommonJS出口.但是,我想在我的项目中使用es6模块.

我正在使用Webpack将它们全部编译在一起,使用6to5-loader来处理es6模块语法.

在我的源文件中,我说import Immutable from 'immutable';---但这会导致问题,因为es6 import正在寻找default已导出的es6 ,但情况并非如此(对于Immutable或可能几乎任何其他npm包).编译后的代码最终看起来像这样:var Immutable = require('immutable')["default"];---当然会抛出错误,因为没有default找到的属性.

我可以使用es6模块使用npm包吗？

我有一个非常简单但很长的网站 - 可以滚动的很多文本.这是一个文档站点,考虑到内容的性质(许多简短的类似条目)我决定一次显示所有内容,因此用户可以从一个条目滚动到另一个条目或通过侧边栏索引导航.这是我喜欢的一个常用的文档模型(如下划线,骨干,并LoDash).

该网站在这里:http://davidtheclark.github.io/scut/.你可以在这里查看预生产代码:https://github.com/davidtheclark/scut/tree/master/docs/dev.

这就是问题所在:对于许多用户来说,这个网站一直在崩溃他们的iOS浏览器.不是所有用户(不是我); 但对于那些做体验的崩溃,它似乎一直复发.(该网站也可能会崩溃一些人的Android手机,我不知道:没有从任何Android用户那里听到过.)我希望有人可以帮助我诊断并可能解决这个问题.

我遇到的部分困难是我无法自己重现崩溃 - 不是在我自己的iOS设备上,而是在Xcode模拟器上.因为该站点完全没有资源(约70KB负载)并且涉及非常少的JavaScript,并且由于先前几次尝试修复此问题的影响,我猜测问题涉及内存使用 - iOS浏览器正在崩溃,因为该网站要求太多的内存.但我不确定这是什么问题,如果是,我不知道如何解决它.

我不确定下一步该尝试什么,我希望一些精明的StackOverflow高手有建议.这个网站看起来如此简单和基本,是什么让它变得如此简单,以至于它崩溃了浏览器？

它太长了吗？是否有难以渲染的CSS？是否有JavaScript内存泄漏？

我对这个特定的网站感兴趣,以便我可以学习在未来预测和预防和/或诊断和修复其他网站上的类似问题.

随意查看或贡献[Github问题](在此Github问题中也是如此.

附录

以下是有关网站可能相关的一些信息:

• 相对于其他网站的HTML文档,HTML文档很大.未经证实它看起来是~225KB.(我注意到LoDash文档甚至更大 - 该网站是否会使人们的手机崩溃？)
• 提供的HTML文档已缩小.
• 服务的CSS和JS也缩小了.
• 该网站使用Prism.js进行语法突出显示.
• 该网站使用Overthrow使2滚动列布局在平板电脑上工作.
• <aside id="help-content">屏幕固定并翻译; 当你点击任何实用程序的"use-name"之类的[？]时它会滑入.

iOS崩溃日志

这些在我看来是运行Chrome的iPhone崩溃并在网站上崩溃的崩溃报告的潜在相关线(我不确定它们是否真的相关或不是因为我没有开发iOS应用程序而且不知道这些报告的来龙去脉):

Free pages:                              5674
Active pages:                            117674
Inactive pages:                          55121
Speculative pages:                       3429
Throttled pages:                         0
Purgeable pages:                         0
Wired pages: …

在整个Flux架构的例子和解释中 - Facebook与React的对应 - 动作类型名称被引用为枚举常量而不是字符串.(参见http://facebook.github.io/flux/上的例子)我正在寻找一个清楚的原因,为什么这是首选的方法.

我在创作和方便方面没有看到任何好处,因为无论您键入constants.actionTypes.UPDATE_DATA(枚举常量)还是'UPDATE_DATA'(字符串),您都必须知道并输入确切的名称.事实上,有时使用非字符串会增加复杂性 - 例如,您不能轻易地将具有操作类型的对象作为键和操作处理程序作为值.

组织,缩小或其他方面的好处是什么？我很好奇.

我想在我的网站上的一些大文本上通过JavaScript实现客户端连字.(我知道CSS3连字符,并且会在可用时使用它,但它通常不可用.)

我一直在使用Hyphenator.js,它运行良好,但是非常大(我的优化,编译版本只有英文版本达到106 KB)而且非常慢.它足够大而且速度慢,我正在考虑完全删除连字符.无论如何,这只是一种奢侈品.

但最近我遇到了似乎是另一种选择:Hypher.令我感到困惑的是,Hypher如何让我这么小,做同样的事情.我想知道是否有人可以解释这一点.

Hypher也能正常工作吗？是否有任何理由使用Hyphenator.js？Hypher的自述文件在页面底部有一个指向Hyphenator.js的链接,但没有一个文本解释了这些项目之间的联系.

有没有人对最有效的客户端连字法有什么看法？

我无法找到足够的Webpack文档和示例来为我的情况找出理想的开发工作流程.以下是使工作流程理想的所有功能:

1. 通过Gulp观察,有效的缓存.(不要以为我需要更换热模块并怀疑它可能不适合我的开发环境.)

2. 供应商模块(现在我只有npm软件包,并非所有软件包都在其主文件中公开UMD全局变量,如果归结为那些)

   一个.在监视期间没有解析和重新编译(因此重新编译更快),

   湾 不接收源图(因此浏览器devtools响应速度更快),以及

   C.写入vendor.js浏览器可以与应用程序包分开缓存的不同包.

3. 应用程序模块

   一个.明确所有依赖关系(import React from 'react';即使React实际上是全局暴露的,或者是通过#2),

   湾 在观看过程中重新编译,

   C.确实收到了源图.

我在文档或示例中看到的大多数内容似乎都没有达到这个工作流程.

虽然我在文档中看到如何创建特定于供应商的包(在此处再现:通过NPM跨多个Browserify或Webpack包共享模块的简单解决方案),所提供的简单示例不涉及2a和2b.

我没有在文档中看到任何方法为不同的块指定不同的编译配置(源图等),或者创建完全独立的Webpack包以及可以相互引用的单独配置文件,除非通过全局化所有供应商库和使用它们作为外部(？),这是不理想的......

此外,我很好奇Gulp用户是使用gulp-webpack还是改为http://webpack.github.io/docs/usage-with-gulp.html中提供的设置.(我不确定它webpack-dev-server是否适合我的开发环境,所以gulp-watch如果可能的话就要坚持下去.)

我错过了其他Webpack用户所知道的东西吗？最好的方法是什么？

或者 Webpack可能不适合这项工作吗？

鉴于以下代码：

var fs = require('fs');

var asyncErrorPromise = new Promise(function(resolve) {
  fs.readFile('does/not/exist.blah', function(fileError, content) {
    if (fileError) throw fileError;
    resolve(content);
  });
});

asyncErrorPromise
  .then(function(content) {
    console.log('content received: ' + content);
  })
  .catch(function(err) {
    console.log('error received: ' + err.name);
  });

我希望fileError抛出的那个（因为我尝试加载的文件不存在）将被 Promise 捕获并汇集到.catch()语句中。所以，最后我不得不这样的输出：error received: ENOENT。

但是，当我运行此代码时，我得到以下信息：

    if (err) throw err;
             ^

Error: ENOENT: no such file or directory, open 'does/not/exist.blah'
    at Error (native)

所以错误没有被捕获：它像往常一样抛出，好像它在 Promise 之外。

为什么会这样？

我能找到的关于 Promises 的所有内容都更关心错误被默默吞下，而不是这个问题，当你不想要它时它实际上会抛出！

我应该如何在这里实现我的意图？我需要使用 try-catch 语句和 …

我需要单独的 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 配置的关键部分：

// ...
entry: {
  specificApp: specificAppEntry,
  appCommon: [appCommonEntry],
  vendor: [listOfVendorJsLibraries],
},
// ...
plugins : [
  new webpack.optimize.CommonsChunkPlugin({
    names: ['appCommon', 'vendor'],
    minChunks: Infinity,
  }),
  // ...
],
// …

我希望看到统计数据告诉我哪些作者在给定目录中贡献了多少行。

git-extras和其他一些类似的工具存在，但我无法弄清楚是否可以使用它们（或其他任何东西）将我的统计信息限制在给定的目录中。

有任何想法吗？