- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在使用 Webpack 和 typescript 开始一个项目。但是当我尝试运行开发服务器时,我在 html-webpack-plugin 上遇到了很多错误。这是我的输出:
> tecnilab-frontend@0.1.0 dev /home/alejo/tecnimaq/tecnilab/tecnilab-frontend
> cross-env NODE_ENV=development webpack-dev-server --mode=development --inline --hot
ℹ 「wds」: Project is running at http://localhost:8080/
ℹ 「wds」: webpack output is served from /
ℹ 「wds」: Content not from webpack is served from ./public
ℹ 「wds」: 404s will fallback to /index.html
ℹ 「wdm」: wait until bundle finished: /
✖ 「wdm」: Hash: 9d40f5b1be348f5478dc
Version: webpack 4.43.0
Time: 10565ms
Built at: 21/07/2020 11:05:56 a. m.
Asset Size Chunks Chunk Names
bundle.js 3.82 MiB main [emitted] main
index.html 369 bytes [emitted]
Entrypoint main = bundle.js
[0] multi (webpack)-dev-server/client?http://localhost:8080 (webpack)/hot/dev-server.js ./src/index.tsx 52 bytes {main} [built]
[./node_modules/react-dom/index.js] 1.33 KiB {main} [built]
[./node_modules/react/index.js] 190 bytes {main} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost:8080] (webpack)-dev-server/client?http://localhost:8080 4.29 KiB {main} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.51 KiB {main} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.53 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/createSocketUrl.js] (webpack)-dev-server/client/utils/createSocketUrl.js 2.91 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/log.js] (webpack)-dev-server/client/utils/log.js 964 bytes {main} [built]
[./node_modules/webpack-dev-server/client/utils/reloadApp.js] (webpack)-dev-server/client/utils/reloadApp.js 1.59 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/sendMessage.js] (webpack)-dev-server/client/utils/sendMessage.js 402 bytes {main} [built]
[./node_modules/webpack-dev-server/node_modules/strip-ansi/index.js] (webpack)-dev-server/node_modules/strip-ansi/index.js 161 bytes {main} [built]
[./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built]
[./node_modules/webpack/hot/dev-server.js] (webpack)/hot/dev-server.js 1.59 KiB {main} [built]
[./node_modules/webpack/hot/emitter.js] (webpack)/hot/emitter.js 75 bytes {main} [built]
[./src/index.tsx] 218 bytes {main} [built]
+ 36 hidden modules
ERROR in /home/alejo/tecnimaq/tecnilab/tecnilab-frontend/node_modules/html-webpack-plugin/index.js
[tsl] ERROR in /home/alejo/tecnimaq/tecnilab/tecnilab-frontend/node_modules/html-webpack-plugin/index.js(16,19)
TS2306: File '/home/alejo/tecnimaq/tecnilab/tecnilab-frontend/node_modules/lodash/lodash.js' is not a module.
ERROR in /home/alejo/tecnimaq/tecnilab/tecnilab-frontend/node_modules/html-webpack-plugin/index.js
[tsl] ERROR in /home/alejo/tecnimaq/tecnilab/tecnilab-frontend/node_modules/html-webpack-plugin/index.js(183,15)
TS2322: Type 'this' is not assignable to type 'HtmlWebpackPlugin'.
Type 'import("/home/alejo/tecnimaq/tecnilab/tecnilab-frontend/node_modules/html-webpack-plugin/index")' is not assignable to type 'import("/home/alejo/tecnimaq/tecnilab/tecnilab-frontend/node_modules/html-webpack-plugin/typings")'.
Types of property 'apply' are incompatible.
Type '(compiler: import("/home/alejo/tecnimaq/tecnilab/tecnilab-frontend/node_modules/webpack/lib/Compiler")) => void' is not assignable to type '(compiler: import("/home/alejo/tecnimaq/tecnilab/tecnilab-frontend/node_modules/@types/webpack/index").Compiler) => void'.
Types of parameters 'compiler' and 'compiler' are incompatible.
Type 'Compiler' is missing the following properties from type 'Compiler': parentCompilation, recordsInputPath, recordsOutputPath, records, and 21 more.
ERROR in /home/alejo/tecnimaq/tecnilab/tecnilab-frontend/node_modules/html-webpack-plugin/index.js
[tsl] ERROR in /home/alejo/tecnimaq/tecnilab/tecnilab-frontend/node_modules/html-webpack-plugin/index.js(201,13)
TS2322: Type 'this' is not assignable to type 'HtmlWebpackPlugin'.
ERROR in /home/alejo/tecnimaq/tecnilab/tecnilab-frontend/node_modules/html-webpack-plugin/index.js
[tsl] ERROR in /home/alejo/tecnimaq/tecnilab/tecnilab-frontend/node_modules/html-webpack-plugin/index.js(213,15)
TS2322: Type 'this' is not assignable to type 'HtmlWebpackPlugin'.
还有很多错误,我不得不截断它,以便它可以解决这个 stackoverflow 问题,
https://pastebin.com/NJXnbkAq 中的完整输出|
{
"name": "tecnilab-frontend",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --mode=development --inline --hot",
"prestart": "npm run build",
"start": "sirv build -s -e",
"prebuild": "mkdirp build",
"build": "cross-env NODE_ENV=production webpack --mode=production --progress",
"test": "jest --watchAll --passWithNoTests",
"lint": "find . -path ./node_modules -prune -o -type f \\( -iname \\*\\.ts -o -iname \\*.tsx -o -iname \\*.js -o -iname \\*\\.jsx \\) -print | xargs -I{} npx eslint {}",
"lintFix": "find . -path ./node_modules -prune -o -type f \\( -iname \\*\\.ts -o -iname \\*.tsx -o -iname \\*.js -o -iname \\*\\.jsx \\) -print | xargs -I{} npx eslint --fix {}"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^3.7.0",
"@typescript-eslint/parser": "^3.7.0",
"eslint": "^7.5.0",
"eslint-config-standard": "^14.1.1",
"eslint-plugin-import": "^2.22.0",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-react": "^7.20.3",
"eslint-plugin-standard": "^4.0.1",
"jest": "^26.1.0"
},
"dependencies": {
"@babel/core": "^7.10.5",
"@babel/plugin-proposal-class-properties": "^7.10.4",
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@babel/preset-env": "^7.10.4",
"@babel/preset-react": "^7.10.4",
"@testing-library/jest-dom": "^5.11.1",
"@testing-library/react": "^10.4.7",
"@testing-library/user-event": "^12.0.11",
"@types/jest": "^26.0.5",
"@types/node": "^14.0.24",
"@types/react": "^16.9.43",
"@types/react-dom": "^16.9.8",
"autoprefixer": "^9.8.5",
"babel-eslint": "^10.1.0",
"babel-jest": "^26.1.0",
"babel-loader": "^8.1.0",
"babel-preset-jest": "^26.1.0",
"bootstrap": "^5.0.0-alpha1",
"cross-env": "^7.0.2",
"css-loader": "^3.6.0",
"html-webpack-plugin": "^4.3.0",
"mini-css-extract-plugin": "^0.9.0",
"postcss-loader": "^3.0.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-test-renderer": "^16.13.1",
"sass": "^1.26.10",
"sass-loader": "^9.0.2",
"style-loader": "^1.2.1",
"terser-webpack-plugin": "^3.0.7",
"ts-loader": "^8.0.1",
"typescript": "^3.9.7",
"url-loader": "^4.1.0",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
}
}
我的 webpack.config.js
const webpack = require('webpack')
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const TerserPlugin = require('terser-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const ENV = process.env.NODE_ENV || 'development'
module.exports = {
entry: './src/index.tsx',
devtool: 'inline-source-map',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'build')
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader']
},
{
test: /\.(ts|tsx)?$/,
use: 'ts-loader',
exclude: /node_modules/
},
{
test: /\.scss$/,
use: [
'style-loader', // inject CSS to page
'css-loader', // translates CSS into CommonJS modules
{
loader: 'postcss-loader', // Run postcss actions
options: {
plugins: function () { // postcss plugins, can be exported to postcss.config.js
return [
require('autoprefixer')
]
}
}
},
'sass-loader' // compiles Sass to CSS
]
}
]
},
resolve: {
extensions: ['.tsx', '.ts', '.js']
},
node: {
browser: true,
node: true
},
optimization: {
minimizer: [
new TerserPlugin({
cache: true,
parallel: true,
sourceMap: true, // Must be set to true if using source-maps in production
terserOptions: {
// https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions
}
})
]
},
plugins: ([
new MiniCssExtractPlugin(),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(ENV)
}),
new HtmlWebpackPlugin({
template: './src/index.html',
hash: true,
minify: { collapseWhitespace: true }
})
]).concat(ENV === 'production' ? [
new webpack.ProgressPlugin()
] : []),
devServer: {
port: process.env.PORT || 8080,
host: 'localhost',
publicPath: '/',
contentBase: './public',
historyApiFallback: true,
open: true,
openPage: ''
}
}
还有我的 index.tsx
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import './css/main.scss'
ReactDOM.render(<App message="The count is:"/>, document.getElementById('root'))
最佳答案
尝试添加 @types/html-webpack-plugin到您的 devDependencies,希望它有效。 :)
关于typescript - 使用 typescript 时 html-webpack-plugin 上的错误太多,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63018870/
我已经写了并且 npm 发布了这个:https://github.com/justin-calleja/pkg-dependents 现在我正在用 Typescript 编写这个包:https://g
我有一个函数,我想在 TypeScript 中模拟它以进行测试。在我的测试中,我只关心 json和 status .但是,当使用 Jest 的 jest.spyOn 时我的模拟函数的类型设置为返回 h
我正在使用一个库 (Axios),它的包中包含 Typescript 声明。 我想声明一个将 AxiosResponse(在库的 .d.ts 文件中声明)作为参数的函数。我有以下内容: functio
我是 Typescript 的新手。我想使用 将一个 Typescript 文件加载到另一个 Typescript 文件中标签。 我做了一些事情,但它不起作用!请帮助我。 first.ts: imp
为什么我会收到下面屏幕截图中显示的错误? Atom 说我的 tsconfig.json“项目文件包含无效选项”用于 allowJs、buildOnSave 和 compileOnSave。 但是应该允
所以我正在创建一个 TypeScript 库,我可以轻松地将所有生成的 JS 文件编译成一个文件。有没有办法将所有 .ts 和 .d.ts 编译成一个 .ts 文件? 除了支持 JS 的版本(较少的智
Microsoft Research 提供了一种名为Safer TypeScript 的新 TypeScript 编译器变体: http://research.microsoft.com/en-us/
我需要这个来在单个文件中分发 TypeScript 中的库。有没有办法将多个 typescript 文件合并到(一个js文件+一个 typescript 定义)文件中? 最佳答案 要创建一个库,您可以
用例:我想知道一个函数在 typescript 中执行需要多少时间。我想为此目的使用装饰器。我希望装饰器应该返回时间以便(我可以进一步使用它),而不仅仅是打印它。 例如: export functio
我想检查一个类型是否可以为 null,以及它是否具有值的条件类型。 我尝试实现 type IsNullable = T extends null ? true : false; 但是好像不行 type
我的问题是基于这个 question and answer 假设我们有下一个代码: const myFn = (p: { a: (n: number) => T, b: (o: T) => v
我知道双重否定前缀,我知道 TypeScript 的单后缀(非空断言)。 但是这个双后缀感叹号是什么? /.*验证码为(\d{6}).*/.exec(email.body!!)!![1] 取自here
我正在使用以下文件结构在 Webstorm 中开发一个项目 | src | ... | many files | types | SomeInterface |
在 TypeScript 类中,可以为属性声明类型,例如: class className { property: string; }; 如何在对象字面量中声明属性的类型? 我试过下面的代码,但它
我正在寻找一种在不丢失推断类型信息的情况下将 TypeScript 中的文字值限制为特定类型的好方法。 让我们考虑一个类型Named,它保证有一个名字。 type Named = { name:
在 TypeScript 中,我想创建一个联合类型来表示属于一个或多个不同类型的值,类似于 oneOf在 OpenAPI或 JSON Schema .根据a previous answer on a
type Func = (foo:string) => void // function expression const myFunctionExpression:Func = function(f
假设我有一个联合类型,我正在使用类似 reducer 的 API 调用模式,看起来像这样: type Action = { request: { action: "create
我在 typescript 中有以下去抖功能: export function debounce( callback: (...args: any[]) => void, wait: numb
在 Vue3 的 defineComponent 函数中,第一个泛型参数是 Props,所以我在这里使用 Typescript 接口(interface)提供我的 props 类型。喜欢: expor
我是一名优秀的程序员,十分优秀!