Scratch 3.0을 Hack하자. Scratch3.0의 package.json을 읽어 보자.

9438 단어 Scratch
전회의 계속입니다!!

이번에는 package.json을 읽어 보겠습니다.
htps : // 기주 b. 이 m/lK/sc등 tch-vm/bぉb/로 j 그런



Package란 무엇인가



npm을 사용하여 앱과 라이브러리를 만들거나 공유하는 경우,
Package나, Module라고 하는 단위로 취급합니다.

npm start
npm run build

라든지 마지막으로 시도했습니다.
이와 같이 Package에 정리하는 것으로, 편리하게 사용할 수 있게 됩니다.

Package json을 만들어 보자.



어떤 앱인가? , 무슨 도서관인가?
어떤 라이브러리를 사용하고 있습니까?
package.json에 나열되어 있습니다.
  • 1. mkdir hello
  • 2. cd hello
  • 3. npm init -y

    • 다음이 표시됩니다.
    {
  "name": "hello",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

    hello라는 package.json이 있습니다.

    스크립트 필드를 살펴 보겠습니다.



    npm run test로 보자.
  • 4. npm run test 
    • > [email protected] test /Users/kyorohiro/devDojo/hello
> echo "Error: no test specified" && exit 1

    라고 표시됩니다.
    package.json의 "scripts":{ ...}에 나열된 명령이 실행되었습니다.

    npm xxxx의 xxx 부분은 package.json에 기록되어 있습니다.
    실행됩니다.

    Dependencies 필드를 보자.



    시도해 보려면 webpack을 추가해 봅시다.
  • 4. npm install --save webpack

    • 그러면 package.json에
      "dependencies": {
    "webpack": "^3.10.0"
  }

    가 추가되었습니다.

    이 방법으로 Package를 사용하는 방법이 기록됩니다.

    Scracth의 package.json을 읽어 보자.


    {
  "name": "scratch-vm",
  "version": "0.1.0",
  "description": "Virtual Machine for Scratch 3.0",
  "author": "Massachusetts Institute of Technology",
  "license": "BSD-3-Clause",
  "homepage": "https://github.com/LLK/scratch-vm#readme",
  "repository": {
    "type": "git",
    "url": "git+ssh://[email protected]/LLK/scratch-vm.git"
  },
  "main": "./dist/node/scratch-vm.js",
  "browser": "./dist/web/scratch-vm.js",
  "scripts": {
    "build": "webpack --progress --colors --bail",
    "coverage": "tap ./test/{unit,integration}/*.js --coverage --coverage-report=lcov",
    "deploy": "touch playground/.nojekyll && gh-pages -t -d playground -m \"Build for $(git log --pretty=format:%H -n1)\"",
    "lint": "eslint .",
    "prepublish": "in-publish && npm run build || not-in-publish",
    "start": "webpack-dev-server",
    "tap": "tap ./test/{unit,integration}/*.js",
    "tap:unit": "tap ./test/unit/*.js",
    "tap:integration": "tap ./test/integration/*.js",
    "test": "npm run lint && npm run tap",
    "watch": "webpack --progress --colors --watch",
    "version": "json -f package.json -I -e \"this.repository.sha = '$(git log -n1 --pretty=format:%H)'\""
  },
  "devDependencies": {
    "adm-zip": "0.4.7",
    "babel-core": "^6.24.1",
    "babel-eslint": "^7.1.1",
    "babel-loader": "^7.0.0",
    "babel-preset-es2015": "^6.24.1",
    "copy-webpack-plugin": "4.2.1",
    "decode-html": "2.0.0",
    "escape-html": "1.0.3",
    "eslint": "^4.5.0",
    "eslint-config-scratch": "^5.0.0",
    "expose-loader": "0.7.4",
    "gh-pages": "^1.1.0",
    "highlightjs": "^9.8.0",
    "htmlparser2": "3.9.2",
    "immutable": "3.8.1",
    "in-publish": "^2.0.0",
    "json": "^9.0.4",
    "lodash.defaultsdeep": "4.6.0",
    "minilog": "3.1.0",
    "nets": "3.2.0",
    "promise": "8.0.1",
    "scratch-audio": "latest",
    "scratch-blocks": "latest",
    "scratch-render": "latest",
    "scratch-storage": "^0.3.0",
    "script-loader": "0.7.2",
    "socket.io-client": "2.0.4",
    "stats.js": "^0.17.0",
    "tap": "^10.2.0",
    "tiny-worker": "^2.1.1",
    "webpack": "^2.4.1",
    "webpack-dev-server": "^2.4.1",
    "worker-loader": "1.1.0"
  }
}

    읽어 보자. 패키지 이름은 "scratch-vm"입니다.
    "version": "0.1.0"라고 하는 것이므로, 개발중인 것을 알 수 있습니다. 첫 번째 정식 버전의 릴리스는 "1.0.0"이상의 값이됩니다.

    홈페이지는 htps : // 기주 b. 코 m / lK / sc 등 tch-vm 와 같습니다.
    이 Package가 처음 읽는 파일은/dist/node/scratch-vm.js 와 같습니다.

    이전에는 npm start로 local에 서버를 시작했지만 webpack-dev-server package를 사용하는 것 같습니다.
    "babel*"이라는 점에서 최근 추가된 JavaScript의 기능을 이용하고 있는 것을 추측할 수 있습니다.
    "scratch*"와 Scratch에서는 기능별로 별도의 Package를 개발이 진행되고 있는 것 같습니다.

    시도해 보자.



    scratch-vm과 마찬가지로 npm start에서 서버를 시작해 봅시다.

    우선 webpack-dev-server에서 서버를 시작해 보겠습니다.


  • 1. mkdir hello-dev-server
  • 2. cd hello-dev-server
  • 3. npm init -y
  • 4. npm install --save webpack
  • 5. npm install --save webpack-dev-server
  • 6. mkdir src
  • 7. emacs src/main.js 
    • //dummy
  • 8. emacs src/index.html 
    • <html>
  <head>
    <title>hello</title>
  </head>
  <body>
    Hello, World!!
  </body>
</html>
  • 9. emacs webpack.config.js 
    • const path = require('path');

module.exports = {
  entry: './src/main.js',
  devServer: {
      contentBase: path.resolve(__dirname, 'src'),
      port: 8085,
  }
};
  • 10. webpack-dev-server

    • 서버가 시작됩니다.
    Project is running at http://localhost:8085/
webpack output is served from /
Content not from webpack is served from

    라고 표시됩니다.

    다음은 npm start에서 서버를 시작하는 것입니다.


  • 11. emacs package.json 
    • {
  "name": "hello-dev-server",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
      "start": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.9.6"
  }
}
  • 12. npm start

    • 서버가 시작됩니다.

    Project is running at http://localhost:8085/
    webpack output is served from/
    Content not from webpack is served from

    계속



    package.json을 읽을 수 있습니다.
    다음 번에는 ...

    PS



    이번에 시도한 코드는 다음과 같습니다.



    이하의 장소에서도, 알레코레 써 갑니다.



    Scratch3.0 자신 전용기를 만들자!! (0)
    Scratch3.0 자신 전용기를 만들자!! (1) Scratch3.0을 빌드해 보자
    Scratch3.0 자신 전용기를 만들자 !! (2) Scratch3.0을 Android 앱으로 작동하자 (1)
    Scratch 3.0 자신 전용기를 만들자 !! (3) Scratch3.0을 Android 앱으로 작동하자 (2)
    Scratch 3.0 자신 전용기를 만들자 !! (4) Scratch3.0을 Android 앱으로 작동하자 (3)
    Scratch 3.0 자신 전용기를 만들자!! (5) Webpack이란)
    Scratch 3.0 자신 전용기를 만들자 !! (6) Scratch3.0의 package.json을 읽어 보자

    불의 형태 With Scratch 2.0 (프로그램 입문) 00권
    화염 유형 With Scratch 2.0 (게임 프로그램 시작)
    적 캐릭터의 이동, 데미지 처리, 중력 조정
    Scratch 3.0을 Hack하자. scratch-gui를 설치해 봅시다.

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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