laravel-mix vue.js 環境構築

インストールする前に node を最新版、npm も最新版にしておく。


laravelmix でアップデートとかしてるとバグる
とにかく、ビルド時にエラーがでたら以下のコマンドで入れ直す。
これ大事。

```

# インストールされたjsモジュールを全部消す
rm -rf node_modules

# インストールされたjsモジュールのバージョン情報を消す
rm package-lock.json yarn.lock

# npmのキャッシュをクリアする
npm cache clear --force

# 再度jsモジュールを全部入れ直して、実行する
npm install
npm run dev

```


参考
https://www.willstyle.co.jp/blog/1836/

まずは、
node と npm がインストールされていることを確認。
node と 一緒に npm もインストールされているはず。
特に注意するのは yum を使って node 入れると激フルバージョンになるので、
注意しような。

n ってのを使おうぜって書いてあるけど、なぜかバージョンアップされんので、
https://qiita.com/robitan/items/a684a81214767c21a560

を参考にいれよう。

```

node --version
npm --version

```

作業ディレクトリは
/var/www/html/helpee.club
とする。



とりあえず、必要そうなのを一気にいれちゃおうぜ。

vim package.json

```

{
  "private": true,
  "license": "UNLICENSED",
  "scripts": {
    "dev": "NODE_ENV=development webpack --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "NODE_ENV=development webpack --config=node_modules/laravel-mix/setup/webpack.config.js --watch",
    "prod": "NODE_ENV=production  webpack --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "devDependencies": {
    "@fortawesome/fontawesome": "^1.1.8",
    "@fortawesome/fontawesome-free-brands": "^5.0.13",
    "@fortawesome/fontawesome-free-regular": "^5.0.13",
    "@fortawesome/fontawesome-free-solid": "^5.0.13",
    "@pderas/vue2-geocoder": "^1.0.2",
    "browser-sync-webpack-plugin": "^2.0.1",
    "vue-headroom": "^0.9.0",
    "vue-infinite-loading": "^2.4.3",
    "vue-lazyload": "^1.2.6",
    "vue-router": "^3.0.2",
    "vue-simple-spinner": "^1.2.8",
    "vue-underscore": "^0.1.4",
    "vue2-touch-events": "^1.1.2"
  },
  "dependencies": {
    "bootstrap": "^4.3.1",
    "element-ui": "^2.5.4",
    "jquery": "^3.3.1",
    "laravel-mix": "^2.1.11",
    "popper.js": "^1.14.7",
    "vue": "^2.6.6"
  }
}

```


そして

```

npm install

```

エラー出ますね。
足りねーよ。ってのは手動で 一気に インストールしますか。

```

npm install imagemin ajv browser-sync

```

これは手動でじっくりやろう。
これでエラーも消える。

以下の部分はエラーじゃなくて、
macじゃない注意って感じで出るだけなのでシカト。

```

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.7 (node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.7: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

```




vim webpack.mix.js

```

const mix = require('laravel-mix');

/*
 *  |--------------------------------------------------------------------------
 *   | Mix Asset Management
 *    |--------------------------------------------------------------------------
 *     |
 *      | Mix provides a clean, fluent API for defining some Webpack build steps
 *       | for your Laravel application. By default, we are compiling the Sass
 *        | file for the application as well as bundling up all the JS files.
 *         |
 *          */

/* キャッシュ対策に重要 */
mix.webpackConfig({

output: {
chunkFilename: 'js/chunks/[name]-[hash].js',
}
});

mix.js('resources/js/app.js', 'public/js').version()
    .autoload({
        "jquery": ['$', 'window.jQuery'],
        "vue": ['Vue', 'window.Vue']
    })
.sass('resources/sass/app.scss', 'public/css');


```

そして

```

npm run dev

```



追記。以下のエラーが出た時も一番上の npm を入れ直したら治った。

```

├── postcss-reporter@6.0.1


0 info it worked if it ends with ok
1 verbose cli [ '/usr/bin/node', '/bin/npm', 'run', 'prod' ]
2 info using npm@6.10.1
3 info using node@v11.14.0
4 verbose run-script [ 'preprod', 'prod', 'postprod' ]
5 info lifecycle @~preprod: @
6 info lifecycle @~prod: @
7 verbose lifecycle @~prod: unsafe-perm in lifecycle true
8 verbose lifecycle @~prod: PATH: /usr/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/var/www/html/uranaibako.com/node_modules/.bin:/opt/remi/php71/root/usr/bin:/opt/remi/php71/root/usr/sbin:/sbin:/bin:/usr/sbin:/usr/bin
9 verbose lifecycle @~prod: CWD: /var/www/html/uranaibako.com
10 silly lifecycle @~prod: Args: [ '-c',
10 silly lifecycle   'NODE_ENV=production  webpack --config=node_modules/laravel-mix/setup/webpack.config.js' ]
11 silly lifecycle @~prod: Returned: code: 1  signal: null
12 info lifecycle @~prod: Failed to exec prod script
13 verbose stack Error: @ prod: `NODE_ENV=production  webpack --config=node_modules/laravel-mix/setup/webpack.config.js`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (/usr/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:301:16)
    13 verbose stack     at EventEmitter.emit (events.js:193:13)
    13 verbose stack     at ChildProcess.<anonymous> (/usr/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
        13 verbose stack     at ChildProcess.emit (events.js:193:13)
        13 verbose stack     at maybeClose (internal/child_process.js:999:16)
        13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:266:5)
        14 verbose pkgid @
        15 verbose cwd /var/www/html/uranaibako.com
        16 verbose Linux 3.10.0-693.11.6.el7.x86_64
        17 verbose argv "/usr/bin/node" "/bin/npm" "run" "prod"
        18 verbose node v11.14.0
        19 verbose npm  v6.10.1
        20 error code ELIFECYCLE
        21 error errno 1
        22 error @ prod: `NODE_ENV=production  webpack --config=node_modules/laravel-mix/setup/webpack.config.js`
        22 error Exit status 1
        23 error Failed at the @ prod script.
        23 error This is probably not a problem with npm. There is likely additional logging output above.
        24 verbose exit [ 1, true ]



        SyntaxError: Unexpected token � in JSON at position 0
        at JSON.parse (<anonymous>)
            at Object.parseSourceMapInput (/var/www/html/uranaibako.com/node_modules/postcss/node_modules/source-map/lib/util.js:433:15)
            at new SourceMapConsumer (/var/www/html/uranaibako.com/node_modules/postcss/node_modules/source-map/lib/source-map-consumer.js:17:22)
            at PreviousMap.consumer (/var/www/html/uranaibako.com/node_modules/postcss/lib/previous-map.js:69:28)
            at new Input (/var/www/html/uranaibako.com/node_modules/postcss/lib/input.js:93:22)
            at parse (/var/www/html/uranaibako.com/node_modules/postcss/lib/parse.js:13:15)
            at new LazyResult (/var/www/html/uranaibako.com/node_modules/postcss/lib/lazy-result.js:60:16)
            at Processor.<anonymous> (/var/www/html/uranaibako.com/node_modules/postcss/lib/processor.js:138:12)
                at Processor.process (/var/www/html/uranaibako.com/node_modules/postcss/lib/processor.js:117:23)
                at Function.creator.process (/var/www/html/uranaibako.com/node_modules/postcss/lib/postcss.js:148:43)
                at OptimizeCssAssetsWebpackPlugin.processCss (/var/www/html/uranaibako.com/node_modules/optimize-css-assets-webpack-plugin/src/index.js:73:21)
                at Object.processor (/var/www/html/uranaibako.com/node_modules/optimize-css-assets-webpack-plugin/src/index.js:13:18)
                at each (/var/www/html/uranaibako.com/node_modules/last-call-webpack-plugin/src/index.js:150:10)
                at arrayEach (/var/www/html/uranaibako.com/node_modules/lodash/_arrayEach.js:15:9)
                at forEach (/var/www/html/uranaibako.com/node_modules/lodash/forEach.js:38:10)
                at OptimizeCssAssetsWebpackPlugin.process (/var/www/html/uranaibako.com/node_modules/last-call-webpack-plugin/src/index.js:147:5)
                at compilation.hooks.optimizeChunkAssets.tapPromise.chunks (/var/www/html/uranaibako.com/node_modules/last-call-webpack-plugin/src/index.js:178:28)
                at _next0 (eval at create (/var/www/html/uranaibako.com/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:17)
                    at _err0 (eval at create (/var/www/html/uranaibako.com/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:25:1)
                        at taskRunner.run (/var/www/html/uranaibako.com/node_modules/terser-webpack-plugin/dist/index.js:321:9)
                        at step (/var/www/html/uranaibako.com/node_modules/terser-webpack-plugin/dist/TaskRunner.js:87:9)
                        at done (/var/www/html/uranaibako.com/node_modules/terser-webpack-plugin/dist/TaskRunner.js:98:30)
                        at tryCatcher (/var/www/html/uranaibako.com/node_modules/bluebird/js/release/util.js:16:23)
                        at Promise._settlePromiseFromHandler (/var/www/html/uranaibako.com/node_modules/bluebird/js/release/promise.js:517:31)
                        at Promise._settlePromise (/var/www/html/uranaibako.com/node_modules/bluebird/js/release/promise.js:574:18)
                        at Promise._settlePromise0 (/var/www/html/uranaibako.com/node_modules/bluebird/js/release/promise.js:619:10)
                        at Promise._settlePromises (/var/www/html/uranaibako.com/node_modules/bluebird/js/release/promise.js:699:18)
                        at _drainQueueStep (/var/www/html/uranaibako.com/node_modules/bluebird/js/release/async.js:138:12)
                        at _drainQueue (/var/www/html/uranaibako.com/node_modules/bluebird/js/release/async.js:131:9)
                        at Async._drainQueues (/var/www/html/uranaibako.com/node_modules/bluebird/js/release/async.js:147:5)
                        at Immediate.Async.drainQueues (/var/www/html/uranaibako.com/node_modules/bluebird/js/release/async.js:17:14)
                        at processImmediate (internal/timers.js:443:21)
                        npm ERR! code ELIFECYCLE
                        npm ERR! errno 1
                        npm ERR! @ prod: `NODE_ENV=production  webpack --config=node_modules/laravel-mix/setup/webpack.config.js`
                        npm ERR! Exit status 1
                        npm ERR!
                        npm ERR! Failed at the @ prod script.
                        npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

                        npm ERR! A complete log of this run can be found in:
                        npm ERR!     /root/.npm/_logs/2019-10-10T01_08_18_616Z-debug.log
                        [root@163-44-165-211 uranaibako.com]# vim /root/.npm/_logs/2019-10-10T01_08_18_616Z-debug.log
                        (reverse-i-search)`prod': npm run prod



```