'parcel' 不是内部或外部命令，也不是可运行的程序或批处理文件。 Vanilla TYPESCRIPT 代码中包裹捆绑器的错误

Question

当我运行在 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,paddle,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,
        PADDLE_WIDTH,
        PADDLE_HEIGHT,
        {
            x: PADDLE_STARTX,
            y: view.canvas.height - PADDLE_HEIGHT - 5
        },
        PADDLE_IMAGE
    )

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

    gameLoop(view, bricks, paddle, ball, 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,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));
}
}

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

Answer 1

为了能够加载 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 代码中包裹捆绑器的错误

'parcel' is not recognized as an internal or external command, operable program or batch file. ERROR for Parcel bundler in Vanilla TYPESCRIPT Code

node.js

npm-start

parceljs

typescript