I am testing the sample code of javascript.

There is script like simple.js under demos directory.

I run demo by this mand yarn build-demos && http-server demos/

simple.js is piled to simple_bundle.js and server works.

However everytime I change simple.js, I need to restart server.

Is there any good short cut for this purpose??

I am not familiar with npm and webpack

Any help is appreciated.

My package.json is here below:

{
  "name": "@magenta/sketch",
  "version": "0.2.0",
  "description": "Make sketches in the browser with machine learning.",
  "main": "es5/index.js",
  "types": "es5/index.d.ts",
  "jsdelivr": "dist/magentasketch.js",
  "unpkg": "dist/magentasketch.js",
  "dependencies": {
    "@tensorflow/tfjs": "^1.0.2"
  },
  "devDependencies": {
    "@types/clone": "^0.1.30",
    "@types/file-saver": "^1.3.0",
    "@types/ndarray": "^1.0.6",
    "@types/node": "^12.0.1",
    "@types/tape": "^4.2.32",
    "browserify": "^16.5.1",
    "clang-format": "^1.2.3",
    "clone": "^1.0.4",
    "file-saver": "^1.3.8",
    "file-saver-typescript": "^1.0.1",
    "fs": "0.0.1-security",
    "http-server": "^0.12.1",
    "in-publish": "^2.0.0",
    "minimist": "^1.2.5",
    "path": "^0.12.7",
    "tape": "^4.9.0",
    "ts-loader": "^5.3.0",
    "ts-node": "^5.0.1",
    "tsify": "^3.0.4",
    "tslint": "^5.9.1",
    "typedoc": "^0.16.9",
    "typedoc-plugin-sourcefile-url": "^1.0.3",
    "typescript": "^3.3.3333",
    "webpack": "^4.24.0",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.14"
  },
  "scripts": {
    "prepublish": "yarn lint && yarn build && yarn bundle",
    "build": "tsc",
    "bundle": "webpack --config ./webpack/lib.config.ts",
    "lint": "tslint -c ../tslint.json -p . -t verbose",
    "test": "ts-node node_modules/tape/bin/tape src/**/*_test.ts",
    "build-demos": "webpack --config ./webpack/demo.config.ts",
    "run-demos": "yarn build-demos && http-server demos/",
    "serve-demos": "http-server demos/",
    "serve-dist": "http-server dist/",
    "docs": "sh ../scripts/generate-docs.sh 'sketch'"
  },
  "author": "Magenta",
  "license": "Apache-2.0",
  "repository": {
    "type": "git",
    "url": ".git"
  }
}

I am testing the sample code of javascript.

There is script like simple.js under demos directory.

I run demo by this mand yarn build-demos && http-server demos/

simple.js is piled to simple_bundle.js and server works.

However everytime I change simple.js, I need to restart server.

Is there any good short cut for this purpose??

I am not familiar with npm and webpack

Any help is appreciated.

My package.json is here below:

{
  "name": "@magenta/sketch",
  "version": "0.2.0",
  "description": "Make sketches in the browser with machine learning.",
  "main": "es5/index.js",
  "types": "es5/index.d.ts",
  "jsdelivr": "dist/magentasketch.js",
  "unpkg": "dist/magentasketch.js",
  "dependencies": {
    "@tensorflow/tfjs": "^1.0.2"
  },
  "devDependencies": {
    "@types/clone": "^0.1.30",
    "@types/file-saver": "^1.3.0",
    "@types/ndarray": "^1.0.6",
    "@types/node": "^12.0.1",
    "@types/tape": "^4.2.32",
    "browserify": "^16.5.1",
    "clang-format": "^1.2.3",
    "clone": "^1.0.4",
    "file-saver": "^1.3.8",
    "file-saver-typescript": "^1.0.1",
    "fs": "0.0.1-security",
    "http-server": "^0.12.1",
    "in-publish": "^2.0.0",
    "minimist": "^1.2.5",
    "path": "^0.12.7",
    "tape": "^4.9.0",
    "ts-loader": "^5.3.0",
    "ts-node": "^5.0.1",
    "tsify": "^3.0.4",
    "tslint": "^5.9.1",
    "typedoc": "^0.16.9",
    "typedoc-plugin-sourcefile-url": "^1.0.3",
    "typescript": "^3.3.3333",
    "webpack": "^4.24.0",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.14"
  },
  "scripts": {
    "prepublish": "yarn lint && yarn build && yarn bundle",
    "build": "tsc",
    "bundle": "webpack --config ./webpack/lib.config.ts",
    "lint": "tslint -c ../tslint.json -p . -t verbose",
    "test": "ts-node node_modules/tape/bin/tape src/**/*_test.ts",
    "build-demos": "webpack --config ./webpack/demo.config.ts",
    "run-demos": "yarn build-demos && http-server demos/",
    "serve-demos": "http-server demos/",
    "serve-dist": "http-server dist/",
    "docs": "sh ../scripts/generate-docs.sh 'sketch'"
  },
  "author": "Magenta",
  "license": "Apache-2.0",
  "repository": {
    "type": "git",
    "url": "https://github./tensorflow/magenta-js.git"
  }
}

• javascript
• npm
• webpack

2 Answers 2

You might need to use Nodemon.

• You install nodemon by npm i nodemon
• In package.json you add a script: "dev": "nodemon dist/index.js"
• Execute the code in the console by adding npm run dev

It should work as you want

You may consider using Nodemon.