Scratch 3.0 を Hackしよう。Scratch3.0 の package.jsonを読んでみよう

前回の続きです!! ノ

今回は、package.json を読んで見ます。
https://github.com/LLK/scratch-vm/blob/develop/package.json


![ダウンロード.png](https://qiita-image-store.s3.amazonaws.com/0/54192/49d2b01c-39a8-9966-b849-dad6ffab1c6f.png)


# Packageとは何か

https://docs.npmjs.com/how-npm-works/packages

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ができました。


## Scripts フィールドを見てみよう

npm run test として見ましょう


- 4. npm run test

```
> hello@1.0.0 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を読んでみよう

https://github.com/LLK/scratch-vm/blob/develop/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://git@github.com/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"
  }
}
```

読んで見ましょう。 Package名は、 "scratch-vm"。
"version": "0.1.0"　と　いうことなので、開発中なのがわかります。最初の製品版のリリースは、"1.0.0"　以上の値がしてされます。

ホームページは、https://github.com/LLK/scratch-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

### 今回試したコードは以下
https://github.com/kyorohiro/doc.advent.scratch30/tree/master/package

### 以下の場所でも、アレコレ書いていきます。

[Scratch3.0 自分専用機 を作ろう!! (0)](http://blogger.firefirestyle.net/2017/09/scratch30-0.html)
[Scratch3.0 自分専用機 を作ろう!! (1) Scratch3.0をビルドしてみよう](
http://blogger.firefirestyle.net/2017/12/scratch30-1-scratch30.html)
[Scratch3.0 自分専用機 を作ろう!! (2) Scratch3.0 を Androidアプリとして動作させてみよう (1)](http://blogger.firefirestyle.net/2017/12/scratch30-2-scratch30-android-1.html)
[Scratch 3.0 自分専用機 を作ろう!! (3) Scratch3.0 を Androidアプリとして動作させてみよう (2)](http://blogger.firefirestyle.net/2017/12/scratch-30-3-scratch30-android-2.html)
[Scratch 3.0 自分専用機 を作ろう!! (4) Scratch3.0 を Androidアプリとして動作させてみよう (3)](http://blogger.firefirestyle.net/2017/12/scratch-30-3-scratch30-android-3.html)
[Scratch 3.0 自分専用機 を作ろう!! (5) Webpack とは)](http://blogger.firefirestyle.net/2017/12/scratch-30-5-webpack.html)
[Scratch 3.0 自分専用機 を作ろう!! (6) Scratch3.0 の package.jsonを読んでみよう](http://blogger.firefirestyle.net/2017/12/scratch-30-6-scratch30-packagejson.html)

[火の型 With Scratch 2.0 (プログラム入門) 　第00巻](https://firebook.firefirestyle.net/)
[炎の型 With Scratch 2.0 (ゲームプログラム入門)](https://firefirebook.firefirestyle.net/)