小编Jon*_*uhl的帖子

找不到模块:错误:无法解析'/ Users/jonathankuhl/Documents/Programming/node js/sandbox/webpack-app'中的'bundle.js'

我正在尝试通过一个关于Webpack的非常基础的教程.我无法编译一个非常基本的单行javascript应用程序.我已多次安装和卸载它.

这只是学习如何使用Webpack的教程.我曾经npm init设置过,package.json并没有做任何其他事情来触摸该文件.我有一个index.html文件和一个app.js文件,假设要捆绑到bundle.js文件中.

我输入:webpack app.js bundle.js进入终端

我一直收到这个错误:

Jonathans-MBP:webpack-app jonathankuhl$ webpack app.js bundle.js
Hash: 8d502a6e1f30f2ad64ab
Version: webpack 4.1.1
Time: 157ms
Built at: 2018-3-20 12:25:32
 1 asset
Entrypoint main = main.js
   [0] ./app.js 18 bytes {0} [built]
   [1] multi ./app.js bundle.js 40 bytes {0} [built]

WARNING in configuration
The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment.

ERROR in multi ./app.js bundle.js
Module not found: …
Run Code Online (Sandbox Code Playgroud)

javascript npm webpack

11
推荐指数
2
解决办法
5067
查看次数

React,在下拉菜单中使用表情符号

我一直在做一个反应小游戏,游戏的一部分允许玩家在开始之前设置一些设置。这是一款回合制标签游戏,四名玩家在地图上追逐不同的标记,同时避开标记为“它”的一名玩家。

我有以下选择选项的渲染方法:

render() {
    return (
        <div>
            <form onSubmit={this.createPlayers} ref="form">
                <label htmlFor="goodies">Choose a Goody!</label>
                <select name="goodies" id="goodies">
                    <option value="donut"></option>
                    <option value="cookie"></option>
                    <option value="hotdog"></option>
                    <option value="bacon"></option>
                    <option value="hamburger"></option>
                    <option value="brocolli"></option>
                </select>
                <button type="submit">Play!</button>
            </form>
        </div>
    );
}
Run Code Online (Sandbox Code Playgroud)

我收到一个很大的警告,说我需要将它们包装在 span 元素中,添加一些 aria 标签并给它们一个错误的角色。

Line 18: Emojis should be wrapped in <span>, have role="img", and have an accessible description with aria-label or aria-labelledby jsx-a11y/accessible-emoji

我这样做了,然后 JSX 拒绝编译,因为它期望每个选项都有一个字符串。它不会让我在选项标签之间放置一个跨度。

我真的很想让这个警告消失,但是当我尝试做它要求的事情时,JSX 将无法编译。我必须做些什么才能在没有警告的情况下完成这项工作?

事实是,我在其他地方使用了表情符号,但没有收到任何警告或任何问题。

javascript accessibility reactjs

8
推荐指数
2
解决办法
5714
查看次数

CSS中的特殊性问题

所以我在一个div类中有一个项目列表,book-selectli我的无序列表中的一个列表中有一个类selected.根据我定义的CSS规则,其中li的s div具有背景颜色skyblue,而li选择了类的那个则是steelblue.

问题是book-select类正在覆盖所选的类,我不明白.div类不会比选择类的li更具体吗?li是在div中的ul.

这是相关的CSS和HTML:

.book-select li {
    font-size: 0.75em;
    text-align: center;
    list-style: none;
    background: skyblue;
    width: 25%;
    margin: auto;
}

.selected {
    background: steelblue;
}

<div class="book-select">
    <h2>Pick a book:</h2>
    <ul>
        <li>Set A Volume 1, Course Foundation</li>
        <li>Set A Volume 2, Expeditionary Airman</li>
        <li>Set A Volume 3, Professional Airman</li>
        <li>Set B Volume 1, Supervisory Communicator</li>
        <li>Set B Volume 2, Supervisor of Airmen</li>
        <li …
Run Code Online (Sandbox Code Playgroud)

html css css-selectors css-specificity

6
推荐指数
1
解决办法
170
查看次数

使用 *ngFor 生成两个表行

我正在开发一个应用程序来显示使用 Java 的 TestNG 测试网站的结果。我知道这有点多余,因为 TestNG 已经生成了自己的网站,但它是训练营培训练习的一部分。

我在使用 生成表格时遇到了一个特殊问题*ngFor。问题是,如果测试返回失败,则会返回堆栈跟踪。由于 Java 堆栈跟踪非常冗长,因此该堆栈跟踪被放置在新行中,因此我无法像通常那样将 放在标记*ngFor上。<tr>我犹豫是否将其放在<tbody>标签上,因为我担心这会导致布局问题(确实如此),所以我尝试将两个<tr>标签包装在 a 中<div>并将其放在*ngFor上面。这不起作用,因为现在我的表标题与表的内容不对齐。我最终将*ngFor指令放在了 上,<tbody>因为这看起来基本上没问题,尽管它在我的行之间产生了一些伪影,就好像它们有边框一样。

但我仍然不喜欢这种方法。它不仅很糟糕,而且在非常大的布局上会产生一些错误。

<table class="table table-striped table-dark table-hover table-sm table-responsive" *ngIf="loaded">
<thead>
    <tr>
        <th>Name</th>
        <th>Signature</th>
        <th>Duration</th>
        <th>Started At</th>
        <th>Finished At</th>
        <th>Status</th>
    </tr>
</thead>
<tbody *ngFor="let method of testResults.tests; let index = index">
        <tr>
            <td>{{ method.name | camelToTitle }}</td>
            <td>{{ method.signature }}</td>
            <td>{{ method.duration_ms }} ms</td>
            <td>{{ method.startTime …
Run Code Online (Sandbox Code Playgroud)

html html-table angular

4
推荐指数
1
解决办法
2314
查看次数

Typescript 无法识别 Vue 组件上的 prop 值

我有以下 Vue 组件。它的目的是构建一个通用的侧边栏,用不同的数据使用两到三次

<template>
    <div>
        <h5>{{ title }}</h5>
        <div v-for="prop of data" :key="prop.id">
            <router-link :to="path(prop.id)">{{ prop.name }}
            <i class="material-icons right">edit</i></router-link>
        </div>
    </div>
</template>

<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
    props: {
        data: Array,
        title: String,
        pathbase: String
    },
    methods: {
        path(id): string {
            return `${this.$props.pathbase}/${id}`;
        }
    }
});
</script>
Run Code Online (Sandbox Code Playgroud)

我的问题是这个。为什么我必须使用this.$props.pathbase来访问pathbase这里的值?为什么this.pathbaseTypescript 认为“无效”?这不是我第一次尝试访问没有的道具,$props但这是 Typescript 第一次抱怨它。此外,如果我使用this.pathbase,Typescript 在我的编辑器 (VSCode) 中抱怨,但 Vue 编译项目时不会出错,并且组件显示和行为适当。

VSCode 上的消息说: Property 'pathbase' does not exist on type …

typescript vue.js vuejs2

3
推荐指数
1
解决办法
4049
查看次数