インストールする前に 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