TypeScript 및 웹팩과 함께 p5.js를 사용하는 방법

17627 단어 javascripttypescriptwebpackp5js
이 게시물은 webpack과 typescript를 사용하여 p5.js 개발을 만드는 것에 관한 것입니다. (미리 Node.js를 설치하고 npm이 사용 가능한지 확인하십시오.)

1단계: 라이브러리 설치



먼저 프로젝트 디렉토리를 생성하고 라이브러리를 설치합니다.

mkdir p5-project
cd p5-project
npm init -y
npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader @types/p5
npm i p5


package.json에서 "main":"index.js" 삭제 및 "private":true 추가

{
  "name": "p5-project",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/p5": "^1.4.2",
    "ts-loader": "^9.3.0",
    "typescript": "^4.6.4",
    "webpack": "^5.72.1",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.9.0"
  },
  "dependencies": {
    "p5": "^1.4.1"
  }
}


webpack 문서에 따르면 이것은 실수로 코드를 게시하는 것을 방지하기 위한 것입니다.

2단계: 디렉토리 및 파일 생성



프로젝트 디렉토리 아래에 src 및 dist 디렉토리, webpack.config.js , tsconfig.json 및 global.d.ts 파일을 생성합니다.

dist 디렉토리는 index.html 를 포함하고 src 디렉토리는 index.ts 를 포함합니다.

p5-project
  |- package.json
  |- package-lock.json
  |- webpack.config.js
  |- tsconfig.json
  |- /dist
    |- index.html
  |- /src
    |- index.ts


각 파일은 다음을 참고하여 작성해야 합니다.

webpack.config.js

const path = require('path');

module.exports = {
    mode: "development",
    entry: './src/index.ts',
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/,
            },
        ],
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js'],
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
    devServer: {
        static: './dist',
    }
};


tsconfig.json

{
  "compilerOptions": {
    "outDir": "./dist/",
    "noImplicitAny": true,
    "module": "es6",
    "target": "es5",
    "jsx": "react",
    "allowJs": true,
    "moduleResolution": "node"
  }
}


global.d.ts

import module = require('p5');
export = module;
export as namespace p5;


index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>P5 Project</title>
</head>
<body>
    <script src="bundle.js"></script>
</body>
</html>


index.ts

import * as p5 from 'p5';

export const sketch = (p: p5) => {
    p.setup = () => {
        p.createCanvas(400, 400);
    }

    p.draw = () => {
        p.background(220);
        p.ellipse(50,50,80,80);
    }
}

export const myp5 = new p5(sketch, document.body);


p5 인스턴스 모드를 사용하여 고유한 함수 이름 또는 다른 라이브러리와의 충돌 가능성을 방지합니다.

3단계: npm 스크립트 추가 및 빌드 시도



package.json에 "start": "webpack serve --open"를 추가하고 터미널에 npm run start를 입력합니다.

{
  "name": "p5-project",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack serve --open" //add
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/p5": "^1.4.2",
    "ts-loader": "^9.3.0",
    "typescript": "^4.6.4",
    "webpack": "^5.72.1",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.9.0"
  },
  "dependencies": {
    "p5": "^1.4.1"
  }
}


브라우저의 캔버스에서 원을 볼 수 있습니다.

이 기사가 도움이 되었기를 바랍니다.
행복한 창의적인 코딩!

리소스 참조:
  • webpack - Getting Started
  • webpack - TypeScript
  • webpack - DevServer
  • p5.js - reference instance mode
    • PouchDB 시작하기
    배열 및 개체 조작 + DOM 차이점

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage