Scratch 3.0 自分専用機 を作ろう!! (6) Scratch3.0 の package.jsonを読んでみよう

on
By kyorohiro (河村潔広)

前回の続きです!! ノ

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



Packageとは何か

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

npmを利用してアプリやライブラリを、作成したり、共有する場合、
Packageや、 Moduleという単位で扱います。

npm start
npm run build

とか 前回試しましたね。
このように、Packageにまとめることで、便利に使えるようになります。


Package json を作ってみる

どんなアプリなのか？、どんあライブラリーなのか？
どんな、ライブラリーを利用しているか？
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 として見ましょう

npm 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

今回試したコードは以下





Comments

Post a Comment