在TypeScript与Webpack环境中无法使用p5.js的问题排查

我正在开发一个基于p5.js的类库项目，用Webpack打包，同时使用TypeScript编写代码，但遇到了模块找不到的问题——VSCode智能提示报错，执行npm run build时也提示无法找到p5模块。

我的配置详情 #

Webpack配置（webpack.config.js） #

const path = require('path'); 
module.exports = { 
  entry: './start.ts', 
  output: { 
    filename: 'start.js', 
    path: path.resolve(__dirname, 'out'), 
    libraryTarget: "var", 
    library: "at", 
  }, 
  resolve: { 
    extensions: ['.ts', '.tsx', '.js', '.jsx'] 
  }, 
  module: { 
    rules: [ 
      { test: /\.ts$/, loader: "awesome-typescript-loader" } 
    ] 
  } 
}; 

package.json配置 #

{ 
  ..., 
  "scripts": { 
    "build": "./node_modules/.bin/webpack --config webpack.config.js" 
  }, 
  "devDependencies": { 
    "awesome-typescript-loader": "5.0.0", 
    "typescript": "2.8.3", 
    "webpack": "4.9.1", 
    "webpack-cli": "2.1.4" 
  }, 
  "dependencies": { 
    "p5": "0.6.1" 
  } 
} 

tsconfig.json配置 #

{ 
  "compilerOptions": { 
    "noImplicitAny": true, 
    "noEmit": true, 
    "sourceMap": true, 
    "target": "es5", 
    "module": "es2015", 
    "lib": [ "dom", "es5" ], 
    "baseUrl": "." 
  }, 
  "include": [ "start.ts" ], 
  "exclude": [ "out" ] 
} 

入口文件start.ts #

import * as p5 from "p5"; 
class entry { 
  // Some code here
} 

遇到的问题 #

执行npm run build时的报错信息如下：

> webpack --config webpack.config.js 
[at-loader] Using typescript@2.8.3 from typescript and "tsconfig.json" from C:\Users\me\Documents\GitHub\myproj/tsconfig.json. 
[at-loader] Checking started in a separate process... 
[at-loader] Checking finished with 1 errors 
Hash: 1ef5f8c2b136b8718342 
Version: webpack 4.9.1 
Time: 1214ms 
Built at: 05/26/2018 8:23:35 AM 
1 asset 
Entrypoint main = start.js 
[0] ./start.ts 93 bytes {0} [built] 
WARNING in configuration 
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment. You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/ 
ERROR in [at-loader] ./start.ts:1:21 
TS2307: Cannot find module 'p5'. 
npm ERR! Windows_NT 10.0.16299 
npm ERR! argv "C:\\Program Files (x86)\\nodejs\\node.exe" "C:\\Program Files (x86)\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "build" 
npm ERR! node v6.3.1 
npm ERR! npm v3.10.3 
npm ERR! code ELIFECYCLE 
npm ERR! andry-tino@0.1.0 build: `webpack --config webpack.config.js` 
npm ERR! Exit status 2 
npm ERR! 
npm ERR! Failed at the me@0.1.0 build script 'webpack --config webpack.config.js'. 
npm ERR! Make sure you have the latest version of node.js and npm installed. 
npm ERR! If you do, this is most likely a problem with the myproj package, 
npm ERR! not with npm itself. 
npm ERR! Tell the author that this fails on your system: 
npm ERR! webpack --config webpack.config.js 
npm ERR! You can get information on how to open an issue for this project with: 
npm ERR! npm bugs myproj 
npm ERR! Or if that isn't available, you can get their info via: 
npm ERR! npm owner ls andry-tino 
npm ERR! There is likely additional logging output above. 
npm ERR! Please include the following file with any support request: 
npm ERR! C:\Users\antino\Documents\GitHub\myproj\npm-debug.log 

解决方案 #

这个问题的核心是TypeScript找不到p5模块的类型定义文件。你安装的p5@0.6.1本身并没有附带TypeScript的类型声明，所以需要单独安装对应的类型包：

1. 安装p5的TypeScript类型定义
   打开终端执行以下命令：

npm install @types/p5 --save-dev

2. （可选）完善Webpack配置
   报错里还有一个关于mode未设置的警告，你可以在webpack.config.js的module.exports里添加mode字段，比如设置为开发环境：

module.exports = {
  // ... 其他配置
  mode: 'development', // 或者 'production'
  // ...
};

3. 验证修复
   安装完成后，重新执行npm run build，VSCode的智能提示错误也会消失。TypeScript现在可以通过@types/p5提供的类型声明识别p5模块了。

内容的提问来源于stack exchange，提问作者Andry