我正在尝试通过一个关于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) 我一直在做一个反应小游戏,游戏的一部分允许玩家在开始之前设置一些设置。这是一款回合制标签游戏,四名玩家在地图上追逐不同的标记,同时避开标记为“它”的一名玩家。
我有以下选择选项的渲染方法:
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 将无法编译。我必须做些什么才能在没有警告的情况下完成这项工作?
事实是,我在其他地方使用了表情符号,但没有收到任何警告或任何问题。
所以我在一个div类中有一个项目列表,book-select而li我的无序列表中的一个列表中有一个类selected.根据我定义的CSS规则,其中li的s div具有背景颜色skyblue,而li选择了类的那个则是steelblue.
问题是book-select类正在覆盖所选的类,我不明白.div类不会比选择类的li更具体吗?li是在div中的ul.
.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) 我正在开发一个应用程序来显示使用 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) 我有以下 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 …
html ×2
javascript ×2
angular ×1
css ×1
html-table ×1
npm ×1
reactjs ×1
typescript ×1
vue.js ×1
vuejs2 ×1
webpack ×1