小编Rob*_*ier的帖子

我有一个问题是使Firefox开发者工具(Firefox Developer Edition 59.0b7)与Webpack在开发模式(使用webpack-dev-server)中生成的CSS源映射一起工作.

在Firefox开发者工具中,当我检查一下时,它的CSS规则位置是一些块的哈希值,例如blob:http://localhost:9090/1e451f65-5d5a-4155-a7a9-96df9945244b而不是真实的文件名(下面的屏幕).这些位置链接也是无效的 - 单击它们不会将我带到源文件.

我有时也会在Firefox Developer Tools控制台中遇到这种错误,我可能会将其连接起来:

Source map error: Error: sourceMapURL could not be parsed Resource URL: blob:null/b9a1fdd6-c0a3-4426-9df0-d50f1e8dc670 Source Map URL: data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3JvYmVydC9wcm9ncmFtbWluZy93ZWJwYWNrLXBsYXlncm91bmQvc3JjL2NvbXBvbmVudC1hL2NvbXBvbmVudC1hLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtJQUNJLGNBQWM7SUFDZCx1QkFBdUI7SUFDdkIsa0JBQWtCO0NBQ3JCOzs7QUFHRDtJQUNJLG1CQUFtQjtJQUNuQixpQkFBaUI7SUFDakIsaUJBQWlCO0NBQ3BCOzs7QUFHRDtJQUNJLG1CQUFtQjtDQUN0QiIsImZpbGUiOiJjb21wb25lbnQtYS5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIuQ29tcG9uZW50QSB7XG4gICAgZGlzcGxheTogZmxleDtcbiAgICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICAgIGZsZXgtd3JhcDogbm93cmFwO1xufVxuXG5cbi5Db21wb25lbnRBLUhlYWRlciB7XG4gICAgbWFyZ2luLWJvdHRvbTogM3B4O1xuICAgIGJhY2tncm91bmQ6ICNlZWU7XG4gICAgZm9udC1zaXplOiAxLjVlbTtcbn1cblxuXG4uQ29tcG9uZW50QS1Cb2R5IHtcbiAgICBwYWRkaW5nLWxlZnQ6IDEwcHg7XG59XG4iXSwic291cmNlUm9vdCI6IiJ9[Learn More]

在Chrome开发者工具(Chrome 59.0.3071.104)中,一切都显示得非常好 - 我在检查器(下面的屏幕)中看到了原始文件名,并在单击文件名链接后看到了原始的SCSS内容.

有没有办法让Firefox正常运行Webpack的CSS源地图,如Chrome？

我的配置

我在开发者工具选项中启用了启用源地图.devtools.debugger.source-maps-enabled被设置为true在about:config.

以下是我的Webpack配置的相关摘录:

// I tried different devtools but the results in Firefox were the same.
devtool: 'eval-source-map'

(...)

// Chain of loaders for CSS files.
{
    test: /\.(scss|sass|css)$/,
    use: [
        {
            loader: 'style-loader',
            options: { …

是否可以在一个 CSS 模块中使用另一个 CSS 模块中的类？

问题是CSS模块正在做它自己的类名翻译，所以.classfrom A.csswill变成A-module--class-something和.classfrom B.csswill变成B-module--class--somethingElse，它们将被视为单独的类。

A.CSS

.class {
  (...)
}

B.CSS

/* .class is the same class as in A.css */
.class > .someOtherClass {
}

你可以用Flexbox做什么是全新的事情,在以任何方式使用CSS之前你都无法做到(没有标记更改).据我所知,Flexbox使许多布局问题更简单,更易于维护,但我也有兴趣了解它带来的哪些独特功能以前是完全不可能的.在阅读了一些文章后,我仍然无法在脑海中找出任何彻底的清单,到目前为止只能拿出2:

• 布局混合具有固定和相对尺寸的项目.在许多情况下,它可以使用calc函数完成(虽然它会很快变得混乱),但我认为如果没有添加额外的标记,一些临界情况就无法弥补(或者我错了,它可以吗？)
• 显示订单中的事物完全独立于源订单

问题：对表单元素进行分组

我有一个HTML表单，在几个地方，单个控件由几个输入组成。一个示例是一组单选按钮。

我想对这些输入及其标签进行显式分组，以便屏幕阅读器（除了通过将它们对齐在一行上的视觉表示之外）还能够理解并宣布这种关系。

例如，假设我有一个像这样的控件：

<div class="control">
  <div class="control-label">Type</div>
  <div class="control-inputs">
    <input type="radio"
           name="type"
           value="a"
           id="type-a" />
    <label for="type-a">A</label>

    <input type="radio"
           name="type"
           value="b"
           id="type-b" />
    <label for="type-b">B</label>
  </div>
</div>

标准解决方案问题：字段集样式问题

fieldset元素，它的孩子legend似乎正是为此而生的（在下面的示例中使用）。

问题是，fieldset和legend元素不能像正常的元素风格（一些讨论这件事），与时下除了在Firefox中这是不可能对准他们利用Flexbox的单行线，其中我的布局需要。

<fieldset class="control">
  <legend class="control-label">Type</legend>
  <div class="form-inputs">
    <input type="radio"
           name="type"
           value="a"
           id="type-a" />
    <label for="type-a">A</label>

    <input type="radio"
           name="type"
           value="b"
           id="type-b" />
    <label for="type-b">B</label>
  </div>
</fieldset>

问：是否有一些其他的方式？

这让我想知道是否有某种使用fieldset元素以外的可访问方式来将多个表单控件分组？

可能的解决方案：role="group"？

有一个“组”角色（在下面的示例中使用），可以添加到简单角色中div，看起来好像可以完成任务，但是没有明确说明它的功能等同于使用字段集。如果是的话，那我该如何标记该组中的一个元素以等效于legend？

<div …

我大约两周前学习了 Vuex。我认为我对 Vuex（或 Flux）是什么以及它是如何工作的有相当深入的了解。

我仍然不知道什么时候应该把财产放入商店，什么时候不应该。您知道何时执行此操作的一些准则吗？

一个明显的情况是，当需要相同信息的组件在组件层次结构中彼此相距较远时。但如果他们很亲密（兄弟姐妹或亲子关系）怎么办？在这种情况下，你是否总是使用组件 props 来传达值？如果没有，那么什么时候没有，为什么？

极端一点，在很多情况下，我可以想象存储在存储中的大部分值和几乎没有任何道具的组件。这种情况对我来说会感觉很奇怪，但我想知道这种方法是否有什么问题。

Vuex 应该只保存状态结构的代码以及如何修改该状态（突变、动作），还是实际的状态初始化和值？

当我的状态初始化代码变得更加复杂时，我开始思考这个问题，因为我在 Vuex 架构中没有看到任何自然的地方可以放入这些代码。

假设我有这样一家商店：

export default {
  state: {
    list: []
  },

  mutations: {
    addItem(state, { item }) {
      state.list.push(item);
    }
  }
}

如果列表开始是空的，那就足够了。但是，如果我有列表的默认值并且还想将列表存储在LocalStorage 中，以便我可以在页面加载之间保留它的值，该怎么办。

const STORAGE_LIST_KEY = 'list';

const LIST_DEFAULT = [
  {
    id: 1,
    name: 'item 1'
  },
  {
    id: 33,
    name: 'item 33'
  }
];

function initializeList() {
  let savedList = localStorage.getItem(STORAGE_LIST_KEY);
  return savedList ? savedList : LIST_DEFAULT;
];

在 Vuex 商店架构中是否有一些自然的地方，我应该把initializeList()函数放在哪里？（例如，在Vue的组成部分，我会把initializeList()到methods该组件的一部分），或者，也许这家店只是结构和初始化代码属于Vue的成分？

概述

我有 Angular CLI 构建的 Angular 6 应用程序。应用程序是用多种语言编写的。每种语言都有 JSON 文件，其中包含所有应用程序文本的翻译。文件名是${language}.json，例如en.json，，。es.jsonpl.json

我想在构建过程中设置应用程序的语言 - 仅以一种语言构建应用程序。为此，我需要导入一个翻译文件，该文件的选择取决于我要构建的语言。

问题

如何仅针对构建过程中选择的语言有条件地导入单个翻译文件？

此外，我希望将翻译文件与应用程序的 JavaScript 的其余部分捆绑在一起，而不是在运行时按需加载。

解决方案草图

const translations = import(`./translations/${lang}.json`);

实际上，上面的代码可以在 Angular 6/Webpack 中运行（唯一需要的就是compilerOptions.module: 'ESNext'在 中进行设置tsconfig.app.json），但不是我想要的方式。它不是在构建时解析导入并将翻译文件与其余代码捆绑在一起，而是为所有翻译创建一个单独的文件（块），然后在运行时根据需要加载其中一个文件，具体取决于JavaScriptlang变量。

那么如何使导入在构建时而不是运行时得到解决呢？另外，在构建期间如何设置lang变量，因为我无权访问 Webpack 配置（它隐藏在 Angular CLI 中）

单独使用 Webpack

单独使用 Webpack 时，可以通过使用NormalModuleReplacementPlugin来实现这一点。但由于 Angular CLI 隐藏了所有 Webpack 配置，我不知道如何将其集成到 Angular 项目中。从 Angular CLI 中弹出 Webpack 配置是我最后的选择。

我正在使用 Angular 插件，需要通过使用InjectionToken插件导出的配置对象来配置它。

import { pluginToken } from 'plugin';

@NgModule({
  providers: {
    // Configure the plugin
    //
    // The configuration value string needs to be taken from some other
    // provider (available for dependency injection).
    { provides: pluginToken, useValue: valueString },
  },
})
class MyModule {
  ...
}

我的问题是这valueString是来自其他提供商的价值。我不知道如何将依赖项注入@NgModule装饰器的提供者。怎么做？

我正在使用TSLint来检查我的 Angular TypeScript 代码。我启用了no-unsafe-any规则，因为对我来说，永远不要对 type 的属性做出任何假设似乎是一个很好的规则any。

问题是该规则报告了我的某些代码的错误，除了禁用该规则之外，我无法以任何方式修复该错误。根据下面的规则无效的代码示例。

public intercept(request: HttpRequest<{}>, next: HttpHandler): Observable<HttpEvent<{}>> {
  return next
    .handle(request)
    .pipe(
      catchError(error => {
        if (error && error.status === httpCodeUnauthorized) {
          // Auto logout if unathorized
          this.authenticationService.logout();
        }

        const errorMessage = (error.error && error.error.message) || error.statusText;

        return throwError(errorMessage);
      }),
    );
}

Linter 报告 2 行 4 个错误：

ERROR: /home/robert/programming/npc/gui/src/app/core/authentication/unauthorized.interceptor.ts[24, 24]: Unsafe use of expression of type 'any'.
ERROR: /home/robert/programming/npc/gui/src/app/core/authentication/unauthorized.interceptor.ts[29, 33]: Unsafe use of expression of type 'any'. …

问题

当我运行npm run buildGatsby 项目时，我收到多个同类警告：

warn chunk styles [mini-css-extract-plugin]
Conflicting order. Following module has been added:
 * css ./node_modules/css-loader??ref--12-oneOf-0-1!./node_modules/postcss-loader/src??postcss-4!./node_modules/sass-loader/dist/cjs.j
s??ref--12-oneOf-0-3!./src/components/MineralsHeading/MineralsHeading.module.scss
despite it was not able to fulfill desired ordering with these modules:
 * css ./node_modules/css-loader??ref--12-oneOf-0-1!./node_modules/postcss-loader/src??postcss-4!./node_modules/sass-loader/dist/cjs.j
s??ref--12-oneOf-0-3!./src/components/Carousel/Carousel.module.scss
warn chunk styles [mini-css-extract-plugin]
Conflicting order. Following module has been added:
 * css ./node_modules/css-loader??ref--12-oneOf-0-1!./node_modules/postcss-loader/src??postcss-4!./node_modules/sass-loader/dist/cjs.j
s??ref--12-oneOf-0-3!./src/components/MineralsSubtitle/MineralsSubtitle.module.scss
despite it was not able to fulfill desired ordering with these modules:
 * css ./node_modules/css-loader??ref--12-oneOf-0-1!./node_modules/postcss-loader/src??postcss-4!./node_modules/sass-loader/dist/cjs.j
s??ref--12-oneOf-0-3!./src/components/Carousel/Carousel.module.scss
warn chunk styles [mini-css-extract-plugin]
Conflicting order. Following module has been added: …