无法在TypeScript和Webpack中使用p5.js [英] Cannot use p5.js in typeScript and Webpack

问题描述

我有一个使用 p5.js 的图书馆项目.

I have a project for a library using p5.js.

我的Webpack配置为:

My Webpack config is:

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是:

I want to use typescript, so tsconfig.json is:

{
  "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的intellisense中获得此功能，但是基本上问题是找不到p5.当我运行npm run build时，我得到:

Problem

Get this also in intellisense in VSCode, but basically the problem is that p5 cannot be found. When I run npm run build I get:

> 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

我在做什么错了?

推荐答案

我查看了一下，结果发现'p5'的键入不正确.所以你不能使用它. 在此处查看其一些问题: https://github.com/processing/p5.js/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+typescript

I take a look at it and it turns out 'p5' typings is not correct. So you can't use it. Check out some of its issues here: https://github.com/processing/p5.js/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+typescript

对于您来说，您的配置以某种方式使您陷入困境. 您可以通过创建index.ts

And for you, your config is messing you up in some way. You can easily see the actual error by creating an 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在全球范围内使用，并且我找不到作为模块使用的示例，因此以下方法可以正常工作:

Since p5 is used globally and I can't find an example to use is as a module, the following will work fine:

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

这篇关于无法在TypeScript和Webpack中使用p5.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！