小编Gur*_*ofu的帖子

在提出这个问题之前，我检查了类似的主题并尝试了典型的解决方案。

我知道 TypeScript 配置中的常见原因是什么"module": "ESXXXX"。\n就我而言，我遇到了错误

TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for D:\\IntelliJ IDEA\\XXXXXX\\node_modules\\tsconfig-paths\\src\\__tests__\\config-loader.test.ts\n

"module": "ESnext"在和两种"module": "CommonJS"情况下。

典型的解决方案之一是使用ts-node/esm。\n首先，此功能是实验性的。接下来，它只是将一个错误替换为另一个错误：

(node:24788) ExperimentalWarning: --experimental-loader is an experimental feature. This feature could change at any time\n(Use `node --trace-warnings ...` to show where the warning was created)\n\n\xc3\x97 ERROR: CustomError: Cannot find module 'D:\\IntelliJ IDEA\\XXXXX\\node_modules\\tsconfig-paths\\register' imported from D:\\IntelliJ IDEA\\XXXXX\\node_modules\\mocha\\lib\\nodejs\\esm-utils.js\n

版本

\n
• 摩卡：9.2.1
\n
• ts 节点：10.7.0
\n

摩卡配置

extension:\n  - ts\n\nspec: …

我的里面有一个柴devDependencies：

"devDependencies": {
    "@types/chai": "4.2.14",
    "chai": "4.2.0",
}

Chai 仅用于测试，但我不会发布测试文件。规则node/no-unpublished-import告诉我：

"chai" is not published 

从文档中：

这是为了防止 npm 发布后出现“找不到模块”错误。如果要导入 devDependency，请写入 .npmignore 或 package.json 的“files”字段。

我不明白“write .npmignore”建议是什么意思。我需要在那里写什么？目前，我有以下内容：

.idea/

/.eslintignore
/.eslintrc.yaml
/.gitignore
/.mocharc.yaml
/.npmignore
/tsconfig.json

**.test.ts

最后一个忽略所有使用 chai 的测试文件。

学科库初步说明

我很抱歉让您阅读本文而耽误您的时间。我写它是为了回答诸如“你在做什么？”之类的问题。和“你为什么要这样做？”。

该库由大量辅助函数和类组成。在这方面它类似于 lodash（检查lodash的结构），但与 lodash 不同的是，源代码是由多级目录组织的。这对开发人员来说很舒服，但对用户来说可能不舒服：要将所需的功能导入到项目中，用户必须知道它在哪里，例如：

import { 
  computeFirstItemNumberForSpecificPaginationPage
} from "@yamato-daiwa/es-extensions/Number/Pagination";

为了解决这个问题，大部分功能已经导入index.ts并从那里再次导出。现在用户可以获得所需的功能：

import { 
  computeFirstItemNumberForSpecificPaginationPage 
} from "@yamato-daiwa/es-extensions";

请注意index.ts（将由 TypeScript 编译为index.js）中的所有函数均适用于 BrowserJS 和 NodeJS。尤其是针对 BrowserJS 的功能在BrowserJS.ts，尤其是针对 NodeJS 的功能NodeJS.ts（目前几乎是空的，但重新导出方法是相同的）。

此外，在这个问题得到解决之前，我将编译后的 JavaScript 包含到库存储库（Distributable目录）中。

问题

从现在开始，@yamato-daiwa/es-extensions 是图书馆，任何依赖它的项目都是消费项目。

我预计消费项目的所有未使用的函数/类都将被Webpack 优化切断。例如，在下面的情况下，我预计该isUndefined功能只会留在 Webpack 包中：

import { isUndefined } from "@yamato-daiwa/es-extensions"

const test: string | …

我在某处听说可以为所有 Lerna 子存储库创建一个 ESlint 预设，但是当开始积极收集有关此的信息时并没有找到明确的信息。

为什么它很有吸引力

如果我想为所有子存储库更改 ESLint（或 TSLint）的设置，则需要一些时间.eslintrc在每个项目中进行编辑。

问题

当然，我们可以放在.eslintrcmonorepo的顶层（与 同级lerna.json）。但是当我们在 IDE 中打开子存储库之一时，它不会.eslintrc在项目外搜索。所以我想.eslintrc我必须在每个子存储库的根目录中。Lerna 能解决这个问题吗？

问题

创建复选框作为Vue组件，方法如下：

1. 复选框组件内部不允许有逻辑：所有事件处理程序以及checked属性都完全取决于外部逻辑，而外部逻辑可以是vuex存储区。
2. 我们不应该查看复选框“ checked”的状态：是否选中它，它还是取决于外部逻辑，例如vuex状态或吸气剂。

尝试1

概念

复选框组件具有checked和onClick属性，该属性的值是不正确的，可以是动态的。

零件

Pug语言模板：

label.SvgCheckbox-LabelAsWrapper(:class="rootElementCssClass" @click.prevent="onClick")
  input.SvgCheckbox-InvisibleAuthenticCheckbox(
    type="checkbox"
    :checked="checked"
    :disabled="disabled"
  )
  svg(viewbox='0 0 24 24').SvgCheckbox-SvgCanvas
    path(
      v-if="!checked"
      d='M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z'
    ).SvgCheckbox-SvgPath.SvgCheckbox-SvgPath__Unchecked
    path(
      v-else
      d='M10,17L5,12L6.41,10.58L10,14.17L17.59,6.58L19,8M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z'
    ).SvgCheckbox-SvgPath.SvgCheckbox-SvgPath__Checked
  span(v-if="text").SvgCheckbox-AppendedText {{ text }}

label.SvgCheckbox-LabelAsWrapper(:class="rootElementCssClass" @click.prevent="onClick")
  input.SvgCheckbox-InvisibleAuthenticCheckbox(
    type="checkbox"
    :checked="checked"
    :disabled="disabled"
  )
  svg(viewbox='0 0 24 24').SvgCheckbox-SvgCanvas
    path(
      v-if="!checked"
      d='M19,3H5C3.89,3 3,3.89 3,5V19A2,2 …

经过大约1个小时的搜索，我没有找到任何关于“如何从前端向AWS CloudWatch Logs提交简单日志”的内容。几乎所有示例都是针对 Node.js 的，但我需要从前端提交错误，而不是从后端提交错误。我什至没有找到应该用于前端的包。

为了节省您的时间，我准备了解决方案的模板。

import { AWSCloudWatch } from "?????";

AWSCloudWatch.config({
  // minimal config
});

if (__IS_DEVELOPMENT_BUILDING_MODE__ || __IS_TESTING_BUILDING_MODE__) {
  console.error(errorMessage);
  return;
}

if (__IS_PRODUCTION_BUILDING_MODE__) {
  // Submit 'errorMessage' to AWS CloudWatch
  // It would be something like
  // AWSCloudWatch.submit(errorMessage)
}

目标

<div class="Card">
  <div class="Card-FullNameLabel">Gregg Sims</div>
  <div class="Card-OrganizationNameLabel">Compubotics</div>
</div>

1. 在.Card-FullNameLabel有font-size: 16px和line-height: 1。
2. 在.Card-OrganizationNameLabel有font-size: 12px和line-height: 1。
3. .Card-FullNameLabel和之间的垂直空间.Card-OrganizationNameLabel必须正好为6px。
4. 以下 CSS 规则必须有效且不得更改。

.Card-FullNameLabel + .Card-OrganizationNameLabel {
  margin-top: 6px;
}

5. 双方.Card-FullNameLabel并.Card-OrganizationNameLabel必须有溢出公差（例如，如果该内容会像ÀÇ?jgpfhjklb?iEstosTreMalfaci等它不能从parrent突出）。
6. 尽管 to ，所有字母都必须完全可见line-height: 1。
7. 不允许在 CSS 代码中使用心算（幻数和/或硬编码偏移量和其他必须预先计算的值）。

可以做什么：将 Pug 预处理器的功能用于标记，将 CSS 预处理器用于样式。

初始小提琴不满足条件编号5：目前该卡不支持溢出。

关于line-height: 1，不好的做法

我一再被告知我必须设置line-height的价值超过1 …

根据Vue.js 文档，在单个文件组件中使用pug 预处理器，需要pug -plain-loader（不是 pug-loader）：

{
  test: /\.pug$/,
  loader: 'pug-plain-loader'
}

如果除了单一文件组件（.vue文件）之外，我还需要将pug模板导入由vue-property-decorator软件包（基于vue-class-component）提供的TypeScript类，该怎么办？

我必须看到仅用于html模板加载的示例：

{
  test: /\.pug$/,
  loader: 'pug-plain-loader'
}

如果需要改用哈巴狗怎么办？

@Component({
  template: require('./MyComponent.html')
})
export default class MyComponent extends Vue {
    //...
}

在这种情况下，不应使用pug-plain-loader：

Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
> <button @click="onClickEventHandler">{{ lettering }}</button>
 @ ../ReusableComponents/RegularButton/RegularButton.ts 18:18-48
 @ ./SPA_Test.ts

我知道首先我需要安装pug-loader。但是，如何使我的webpack配置与pug-plain-loader设置保持一致？

// ...
module: {
  rules: [ …

在SASS中：

.DocumentationArticle

  $DocumentationArticle-Heading__TopLevel--Selector: null

  &-Heading
    &__TopLevel
      $DocumentationArticle-Heading__TopLevel--Selector: &
    &__Section
      @debug($DocumentationArticle-Heading__TopLevel--Selector) // OK: ".DocumentationArticle-Heading__TopLevel"

在 Stylus 中，变量值已更改，此更改仅在更改的范围内可见：

.DocumentationArticle

  DocumentationArticle-Heading__TopLevel--Selector = null

  &-Heading
    &__TopLevel
      DocumentationArticle-Heading__TopLevel--Selector = selector()
    &__Section
      warn(DocumentationArticle-Heading__TopLevel--Selector) // null!

如何使DocumentationArticle-Heading__TopLevel--Selector新值在&__Section范围内可见？

小提琴

如果元素不是按钮/输入/链接tabindex="0"，仅通过关注元素然后按下键来触发单击事件是不够的。Enter还需要什么？

<!--not working, even if the element has focus-->
<div tabindex=0>Trigger click event on me by Enter key!<div>