LoginSignup
0
0

More than 5 years have passed since last update.

monacaでnpmを使う

Last updated at Posted at 2019-02-21

Monacaの試用版(書籍についていたクーポン券)を使って、アプリを作ってみました。
一通り使ってみて、スマホアプリを作るなら、とてもお手軽なIDEだなーと思います。
この手のIDEのなかで一番スッと使えました。学習コストって低ければ低いほどいいですよね。
高校や大学の先生が教材に使ってるのも頷けます。

しかし、npmからインストールできる様々なライブラリが(試用版だからなのか)権限がなくて-gオプションでインストールできなかったので、その場合どうするのかシェアします。

package.jsonの中身

プロジェクトのトップレベルには、package.jsonというファイルがあります。
そのファイルには、"scripts"という項目があります。

package.json
{
    "name": "monaca-template-minimum",
    "displayName": "Monaca Template Minimum",
    "dependencies": {
        "@mapbox/polyline": "^1.0.0",
        "browserify": "^16.2.3",
        "cordova-custom-config": "5.0.2",
        "cordova-plugin-dialogs": "2.0.1",
        "cordova-plugin-splashscreen": "5.0.1",
        "cordova-plugin-vibration": "2.1.6",
        "cordova-plugin-whitelist": "1.3.3",
        "gtfs-realtime-bindings": "0.0.4",
        "monaca-lib": "^3.1.0",
        "monaca-plugin-backend": "2.0.1",
        "monaca-plugin-monaca-core": "3.2.1",
        "pg": "^7.7.1",
        "request": "^2.88.0"
    },
    "scripts": {
        "monaca:preview": "npm run dev",
        "dev": "browser-sync start -s www/ --watch --port 8080 --ui-port 8081",
        "build1": "browserify www/js/getVehicle.js > www/js/vehicle.js",
        "build2": "browserify www/js/git-polyline.js > www/js/polyline.js",
        "build3": "browserify www/js/getRouteInfo.js > www/js/route.js",
        "build4": "browserify www/js/getAlert.js > www/js/alert.js"
    },
    "cordova": {
        "plugins": {
            "cordova-plugin-whitelist": {},
            "cordova-plugin-splashscreen": {},
            "cordova-custom-config": {},
            "monaca-plugin-monaca-core": {},
            "cordova-plugin-dialogs": {},
            "cordova-plugin-vibration": {},
            "monaca-plugin-backend": {}
        }
    },
    "devDependencies": {
        "browser-sync": "^2.26.3",
        "cordova": "^7.1.0"
    }
}

"scripts"にはbuild1などのコマンドが入っています。
build1など、エイリアスを作り、対応するコマンドを登録します。

"build1": "browserify www/js/getVehicle.js > www/js/vehicle.js"

Terminalを起動

monacaのブラウザ版IDE画面には、Preview Log、Debuggerタブの他に、Terminalというタブがあります。

Welcome to Monaca Terminal Console!
/project $ npm run build1

通常、

npm install -g browserify
browserify www/js/getVehicle.js -o www/js/vehicle.js

などとダイレクトにコマンドを使うところで
npm run {上記コマンド}を使うと、グローバルにコマンドをインストールしたり実行する権限なくても動きます。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0