'parcel' 不是内部或外部命令，也不是可运行的程序或批处理文件 Vanilla TYPESCRIPT Code

如何解决'parcel' 不是内部或外部命令，也不是可运行的程序或批处理文件 Vanilla TYPESCRIPT Code

当我运行在 freecodecamp 文章中发布的打砖块游戏的代码时，会出现此错误。我无法为游戏正确设置配置。我期望它运行游戏，但它没有做同样的事情。在调试时，它不断抛出有关其构建的错误。我不知道，因为我在网上学到了它，但是这个错误没有得到解决。我附上了调试器图像和错误图像以及日志文件文本，其中显示了错误。 DEBUG CONSOLE

TERMINAL

0 verbose cli [
0 verbose cli   'C:\\Program Files\\nodejs\\node.exe',0 verbose cli   'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',0 verbose cli   'start'
0 verbose cli ]
1 info using npm@7.5.3
2 info using node@v15.9.0
3 timing config:load:defaults Completed in 4ms
4 timing config:load:file:C:\Program Files\nodejs\node_modules\npm\npmrc Completed in 5ms
5 timing config:load:builtin Completed in 5ms
6 timing config:load:cli Completed in 6ms
7 timing config:load:env Completed in 2ms
8 timing config:load:file:D:\arkanoid-ts-startHere\.npmrc Completed in 1ms
9 timing config:load:project Completed in 2ms
10 timing config:load:file:C:\Users\WELCOME\.npmrc Completed in 0ms
11 timing config:load:user Completed in 0ms
12 timing config:load:file:C:\Users\WELCOME\AppData\Roaming\npm\etc\npmrc Completed in 0ms
13 timing config:load:global Completed in 0ms
14 timing config:load:cafile Completed in 1ms
15 timing config:load:validate Completed in 0ms
16 timing config:load:setUserAgent Completed in 2ms
17 timing config:load:setEnvs Completed in 3ms
18 timing config:load Completed in 27ms
19 verbose npm-session 84c35795bdcebad3
20 timing npm:load Completed in 60ms
21 timing command:run-script Completed in 146ms
22 timing command:start Completed in 163ms
23 verbose stack Error: command Failed
23 verbose stack     at ChildProcess.<anonymous> (C:\Program 
Files\nodejs\node_modules\npm\node_modules\@npmcli\promise-spawn\index.js:64:27)
23 verbose stack     at ChildProcess.emit (node:events:378:20)
23 verbose stack     at maybeClose (node:internal/child_process:1067:16)
23 verbose stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:301:5)
24 verbose pkgid ts-parcel@1.0.0
25 verbose cwd D:\arkanoid-ts-startHere
26 verbose Windows_NT 10.0.19042
27 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program 
Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "start"
28 verbose node v15.9.0
29 verbose npm  v7.5.3
30 error code 1
31 error path D:\arkanoid-ts-startHere
32 error command Failed
33 error command C:\WINDOWS\system32\cmd.exe /d /s /c parcel serve src/index.html
34 verbose exit 1

这是 package.json 文件

{
"name": "ts-parcel","version": "1.0.0","description": "","main": "index.js","scripts": {
    "test": "echo \"Error: no test specified\" && exit 1","start": "parcel serve src/index.html","watch": "parcel watch src/index.html"
},"type": "module","author": "","license": "ISC","devDependencies": {
    "@typescript-eslint/eslint-plugin": "^4.11.0","@typescript-eslint/parser": "^4.11.0","eslint": "^7.16.0","eslint-config-prettier": "^7.1.0","eslint-plugin-prettier": "^3.3.0","parcel": "^1.12.4","prettier": "^2.2.1","typescript": "^4.1.3"
}
}

这是 index.ts 文件

import {CanvasView} from './view/CanvasView';
import {Ball} from './sprites/Ball';
import {Brick} from './sprites/Brick';
import {Paddle} from './sprites/Paddle';
import {Collision} from './Collision';

//Images
import PADDLE_IMAGE from './images/paddle.png';
import BALL_IMAGE from './images/ball.png';
import BRICK_IMAGE from './images/brick.png';

//level and colors
import{
    PADDLE_SPEED,PADDLE_WIDTH,PADDLE_HEIGHT,PADDLE_STARTX,BALL_SPEED,BALL_SIZE,BALL_STARTX,BALL_STARTY
} from './setup';

//helpers
import {createBricks} from './helpers';

let gameOver = false;
let score = 0;

function setGameOver(view: CanvasView){
    view.drawInfo('Game Over!');
    gameOver = false;
}

function setGameWin(view: CanvasView){
    view.drawInfo('Game Won!!!');
    gameOver = false;
}

function gameLoop(
    view: CanvasView,bricks:Brick[],paddle: Paddle,ball: Ball,collision: Collision
){
    console.log("draw!");
    view.clear();
    view.drawBricks(bricks);
    view.drawSprite(paddle);
    view.drawSprite(ball);
    //move ball
    ball.moveBall();

    //move paddle and check as it won't exit the playField
    if(
        (paddle.isMovingLeft && paddle.pos.x > 0) || 
        (paddle.isMovingRight && paddle.pos.x < view.canvas.width - paddle.width)
    ){
        paddle.movePaddle();
    }

    collision.checkBallCollision(ball,paddle,view);
    const collidingBrick = collision.isCollidingBricks(ball,bricks);

    if(collidingBrick){
        score += 1;
        view.drawscore(score);
    }

    //GAME OVER!!! when ball leaves playField
    if(ball.pos.y > view.canvas.height) gameOver = true;
    //if game won,set gameOver and display win
    if(bricks.length === 0) return setGameWin(view);
    //return if gameOver and don't run the requestAnimationFrame
    if(gameOver) return setGameOver(view);

    requestAnimationFrame(() => gameLoop(view,bricks,ball,collision));
}

function startGame(view:CanvasView){
    //reset display
    score = 0;
    view.drawInfo('');
    view.drawscore(0);

    //create collision
    const collision = new Collision();

    //create all bricks
    const bricks = createBricks();

    //create all paddle
    const paddle = new Paddle(
        PADDLE_SPEED,{
            x: PADDLE_STARTX,y: view.canvas.height - PADDLE_HEIGHT - 5
        },PADDLE_IMAGE
    )

    //create a ball
    const ball = new Ball(
        BALL_SPEED,{x: BALL_STARTX,y: BALL_STARTY},BALL_IMAGE
    );

    gameLoop(view,collision);
}

//create a view
const view = new CanvasView('#playField');
view.initStartButton(startGame);

这是 CanvasView.ts 文件

import {Brick} from '../sprites/Brick';
import {Ball} from '../sprites/Ball';
import {Paddle} from '../sprites/Paddle';
import { BRICK_IMAGES } from '~/setup';

export class CanvasView{
canvas: HTMLCanvasElement;
private context: CanvasRenderingContext2D | null;
private scoredisplay: HTMLObjectElement | null;
private start: HTMLObjectElement | null;
private info: HTMLObjectElement| null;

constructor(canvasName: string){
    this.canvas = document.querySelector(canvasName) as HTMLCanvasElement;
    this.context = this.canvas.getContext('2d');
    this.scoredisplay = document.querySelector('#score');
    this.start = document.querySelector('#start');
    this.info = document.querySelector('#info');
}

clear(): void{
    this.context?.clearRect(0,this.canvas.width,this.canvas.height);
}

initStartButton(startFunction: (view:CanvasView) => void): void{
    this.start?.addEventListener('click',() => startFunction(this));
}

drawscore(score: number): void{
    if(this.scoredisplay) this.scoredisplay.innerHTML = score.toString();
}

drawInfo(text: string): void{
    if(this.info) this.info.innerHTML = text;
}

drawSprite(brick: Brick | Paddle | Ball): void{
    if(!brick) return;

    this.context?.drawImage(
        brick.image,brick.pos.x,brick.pos.y,brick.width,brick.height
    );
}

drawBricks(bricks: Brick[]): void{
    bricks.forEach(brick => this.drawSprite(brick));
}
}

以上代码为游戏主机。希望能帮助解决。

解决方法

为了能够加载 ES 模块，我们需要在此文件中设置“type”:“module”，或者作为替代，我们可以使用 .mjs 文件扩展名，而不是通常的 .js 文件扩展名。

在您的 package.json 文件中添加：

{
  "type": "module",}

举个例子：

{
  "name": "esm","version": "1.0.0","description": "","main": "index.js","scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },"type": "module","author": "","license": "ISC"
}

如果这不起作用，请卸载全球和本地版本的 Parcel：

npm uninstall parcel
npm uninstall -g parcel

然后使用以下命令安装它：

npm install parcel --save-dev

'parcel' 不是内部或外部命令，也不是可运行的程序或批处理文件 Vanilla TYPESCRIPT Code

如何解决'parcel' 不是内部或外部命令，也不是可运行的程序或批处理文件 Vanilla TYPESCRIPT Code

解决方法

相关推荐