TypeScript+webpack으로 Processing(p5.js) 환경 구축

15476 단어 p5.jsprocessingwebpackTypeScript

소개





p5.js는 JavaScript로 구현된 Processing입니다. 프로그램을 작성하는 것도 당연히 자바 스크립트입니다. 웹 브라우저에서 실행할 수 있는 것이 장점입니다.

약간의 제네레티브 아트 프로그램을 쓰는 경우는 JavaScript 그대로도 괜찮습니다만, 게임을 만드는 경우에 대규모 프로그램이 되면, 타입을 원합니다.

본 기사에서는, TypeScript로 Processing 프로그래밍을 하는 환경의 구축 순서를 소개합니다.

우선 환경을 얻고 싶다면



TypeScript에서 p5.js를 작성하는 환경을 우선 얻고 싶다면 다음과 같이 진행됩니다.
$ git clone [email protected]:memememomo/ts-p5js-template.git
$ cd ts-p5js-template
$ yarn
$ yarn watch

브라우저가 자동으로 시작되고 다음과 같은 그림이 표시된다고 생각합니다 (그렇지 않으면 다시로드하십시오).



그런 다음 src/main.ts를 편집하기 만하면됩니다.

이후는, 스크래치로 환경을 준비하는 순서와 각종 설정의 해설이 됩니다.

yarn 설치



패키지 관리로 yarn을 이용합니다. Homebrew를 이용하여 설치합니다.

yarn 설치
$ brew install yarn

프로젝트 디렉토리 만들기



프로젝트 디렉토리를 만듭니다.
$ mkdir ts-p5js-template
$ cd ts-p5js-template

package.json 생성 및 필수 모듈 설치



yarn 명령을 사용하여 다양한 필수 파일을 생성합니다.
$ yarn init -y # package.json

yarn 명령을 사용하여 필요한 모듈을 설치합니다.
$ yarn add webpack --dev      # webpackの本体
$ yarn add webpack-cli --dev  # webpackコマンド
$ yarn add typescript --dev   # TypeScript
$ yarn add ts-loader --dev    # webpack用のTypeScriptローダー
$ yarn add @types/p5 --dev    # p5.jsの型ファイル
$ yarn add concurrently --dev # 複数のコマンドを同時実行
$ yarn add browser-sync --dev # ファイル変更監視とブラウザリロード

TypeScript 구성 파일 (tsconfig.json) 만들기



TypeScript 재입문 - "최고의 TypeScript"로 JavaScript를 "부드러운"정적 형식 언어로
htps : // 에 mpぉ y 면 t. 엔 - 그럼. 코m/엔기네 r후 b/엔트리/2019/04/16/103000

위의 페이지를 참고로 설정합니다.

tsconfig.json
{
  "compilerOptions": {
    "sourceMap": true,
    // TSはECMAScript5に変換
    "target": "es5",
    // TSのモジュールはES Modulesとして出力
    "module": "es2015",
    // node_modulesからライブラリを読み込む
    "moduleResolution": "node",
    // 暗黙的なanyを許可する(頑張らない)
    "noImplicitAny": false,
    // コメントは削除しない
    "removeComments": false,
    // コンパイルターゲットがES5時にfor-of文を使えるようにする
    "downlevelIteration": true
  }
}

p5.js 용 형식 파일 만들기 (global.d.ts)



p5.js에 대한 형식 파일을 만듭니다.

global.d.ts
import module = require('p5');
import * as p5Global from 'p5/global'

export = module;
export as namespace p5;
declare global {
    interface Window {
        p5: typeof module,
    }
}

webpack 용 구성 파일 만들기 (webpack.config.js)



webpack에 대한 구성 파일을 만듭니다.

webpack.config.js
const path = require('path');

module.exports = {
  // production の場合、最適化された状態で出力される
  // development の場合、ソースマップが有効でJSファイルが出力される
  mode: 'development',

  // エントリーポイント
  entry: './src/main.ts',

  module: {
    rules: [
      {
        // 拡張子 .ts の場合
        test: /\.ts$/,
        // TypeScript をコンパイルする
        use: "ts-loader"
      }
    ]
  },
  // import 文で .ts ファイルを解決する
  resolve: {
    modules: [
      "node_modules"
    ],
    extensions: [".ts", ".js"]
  }
};

package.json에 작업 설정



package.json에 scripts를 추가하여 작업을 설정합니다. webpack에 의한 빌드 명령을 설정하고 있습니다.

package.json
{
   ...
   "scripts": {
       "build": "webpack",
       "watch": "concurrently \"browser-sync start --server -w\" \" webpack --watch\""
   },
   ...
}

이제 yarn build와 같은 작업을 수행할 수 있습니다.

HTML 및 TS 파일 만들기



src/main.ts
import * as p5 from 'p5';

const sketch = (p: p5) => {
    p.preload = () => {
    };

    p.setup = () => {
        p.resizeCanvas(p.windowWidth, p.windowHeight);
    };

    p.windowResized = () => {
        p.resizeCanvas(p.windowWidth, p.windowHeight);
    };

    p.draw = () => {
        p.background(100);
        p.ellipse(100, 150, 180, 60);
    }
};

const sketchP = new p5(sketch);

index.html
<html>
<head>
    <script src="dist/main.js"></script>

    <link rel="shortcut icon" href="https://p5js.org/assets/img/favicon.ico">
    <link rel="icon" href="https://p5js.org/assets/img/favicon.ico">

    <style>
        * {
            padding: 0px;
            margin: 0px;
        }
    </style>
    <script>
    </script>
</head>
<body>
</body>
</html>

실행



다음 명령을 실행하면 브라우저가 시작됩니다.
$ yarn watch

아래와 같은 그림이 표시된다고 생각합니다. (표시되지 않으면 다시로드하십시오.)


src/main.ts를 편집하면 변경 내용이 자동으로 감지되고 브라우저가 다시로드됩니다.

이상으로 TypeScript로 Processing을 쓰는 환경이 완성되었습니다.

요약



TypeScript + webpack으로 Proessing을 작성하는 환경을 구축했습니다. 이것일 정도의 규모의 게임 제작에서도 쾌적하게 실시할 수 있을까 생각합니다.

참고 링크



최신판 TypeScript 3.0+webpack 4의 환경 구축 정리(React, Vue.js, Three.js의 샘플 첨부)
htps // // cs. 메아아/엔트리/16329

webpack 4 입문
htps : // 이 m/소아 rfぁt/있어 ms/28bf799f7에0335b68186

p5-typescript-starter
htps : // 기주 b. 이 m / gau ph / p5-ty 페스코 pts-r r
CreativeCoding용으로 P5.js가 TypeScript로 쓸 수 있는 환경을 만들었다.
p5.js에서 반응형 대응의 간단한 그림 앱

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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