node_module上失败的基本webpack类型脚本示例包括TS7016

Question

遵循官方的webpack typescript集成指南https://webpack.js.org/guides/typescript/它正在失败。我错过了什么？

ERROR in /Users/kevzettler/code/hypeworks/src/index.ts
./src/index.ts
[tsl] ERROR in /Users/kevzettler/code/hypeworks/src/index.ts(1,21)
TS7016: Could not find a declaration file for module 'lodash'. '/Users/kevzettler/code/hypeworks/node_modules/lodash/lodash.js' implicitly has an 'any' type.
ℹ ｢wdm｣: Failed to compile.

index.ts:

import * as _ from 'lodash';
function component() {
const element = document.createElement('div');
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());

tsconfig.json

{
"compilerOptions": {
"outDir": "./dist/",
"sourceMap": true,
"noImplicitAny": true,
"module": "es6",
"target": "es5",
"jsx": "react",
"allowJs": true,
"moduleResolution": "node",
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2017",
"dom"
]
}
}

webpack.config.js

const path = require('path');
module.exports = {
entry: './src/index.ts',
devtool: 'inline-source-map',
mode: 'production',
module: {
rules: [
{
test: /.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
],
},
resolve: {
extensions: [ '.tsx', '.ts', '.js' ],
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
};

软件包.json

{
"name": "derp",
"version": "0.0.1",
"description": "",
"private": true,
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"start": "webpack-dev-server --mode development"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"ts-loader": "^8.0.4",
"typescript": "^4.0.3",
"webpack": "^4.44.2",
"webpack-cli": "^3.3.12"
},
"dependencies": {
"lodash": "^4.17.20",
"uuid": "^8.3.1",
"webpack-dev-server": "^3.11.0"
}
}

Answer 1

您需要安装lodash类型，因为它们在lodash包中不直接可用。

npm install --save @types/lodash