'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
当我 运行 在 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));
}
}
以上代码为游戏主机。希望能帮助解决。
为了能够加载 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
当我 运行 在 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));
}
}
以上代码为游戏主机。希望能帮助解决。
为了能够加载 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