无法在typeScript和Webpack中使用p5.js

Question

我有一个使用 p5.js 的库项目。

详情

我的 Webpack 配置是：

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
}

问题

在 VSCode 的智能感知中也得到了这个，但基本上问题是找不到

p5

。当我跑步时

npm run build

我得到：

> webpack --config webpack.config.js

[at-loader] Using [email protected] 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! [email protected] build: `webpack --config webpack.config.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] 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

我做错了什么？

Answer 1

我看了一下，发现“p5”输入不正确。所以你不能使用它。 在这里查看它的一些问题：https://github.com/processing/p5.js/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+typescript

对于你来说，你的配置在某种程度上让你陷入困境。 您可以通过创建

index.ts

:

轻松查看实际错误

import 'p5'
console.log(p5)

并尝试使用

tsc

:

进行转译

node_modules/p5/lib/p5.d.ts(555,19): error TS2304: Cannot find name 'COLOR_MODE'.
node_modules/p5/lib/p5.d.ts(871,87): error TS2304: Cannot find name 'ARC_MODE'.

... removing some errors for brevity

node_modules/p5/lib/p5.d.ts(10312,5): error TS2416: Property 'amp' in type 'Noise' is not assignable to the same property in base type 'Oscillator'.
  Type '(volume: number | object, rampTime?: number, timeFromNow?: number) => void' is not assignable to type '(vol: number | object, rampTime?: number, timeFromNow?: number) => AudioParam'.
    Type 'void' is not assignable to type 'AudioParam'.

由于

p5

已在全球范围内使用，并且我找不到将其用作模块的示例，因此以下内容可以正常工作：

// index.ts
declare const p5: any
// code away

Answer 2

p5.js 有一个官方的打字包。使用

npm i @types/p5 --save-dev

安装它将为您提供真正的输入，而不是 Unional 发布的解决方案中的

any

类型。

这是 npm 上的打字包： https://www.npmjs.com/package/@types/p5