Question

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

详细信息

我的Webpack配置是：

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 }是：

p5

问题

在VSCode的intellisense中也可以得到它，但基本上问题是找不到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时，我得到：

let divArray = $(".mybox");
let sliderFrame = $(".slider");
let i = 0;

function test() {
  //sliderFrame.append(divArray[i]);
  sliderFrame.delay(1000).animate({ right: 150 * i + "px" });
  if (i < divArray.length/2) i++;
  else i = 0;
  test();
}
test();

https://codepen.io/xblack/pen/mLYdeb

我做错了什么？

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

不能在typeScript和Webpack中使用p5.js

详细信息

问题

2 个答案: