typescript - 不能在 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"
  }
}

我想使用 typescript，所以 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的intellisense中也可以得到这个，但是基本上问题是找不到p5。当我运行 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

我做错了什么？

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