Npm更新或安装软件包会破坏编译器

时间：2019-12-15 11:05:40

标签： javascript vue.js npm webpack node-modules

我有一个最近的项目正在研究中。 我安装了vue软件包，npm编译器坏了，无法再编译了。我尝试过使用其他软件包，并且总是一样（或更新）。

错误： npm WARN extract-text-webpack-plugin@3.0.2需要一个webpack@^3.1.0的对等节点，但未安装。您必须自己安装对等依赖项。

也在github页面中： [不推荐使用]，请使用https://github.com/webpack-contrib/mini-css-extract-plugin将文本包中的文本提取到单独的文件中

这无处发生。星期五，一切正常。

星期五安装的软件包：purgecss，vue-instantsearch和algoliasearch。

更新npm后：npm run watch命令可以运行，但是app.css文件中包含JS，这很奇怪。 npm run生产不再起作用。

错误：

> cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

SyntaxError: Unexpected token � in JSON at position 0
    at JSON.parse (<anonymous>)
    at Object.parseSourceMapInput (C:\server\htdocs\myproject\node_modules\postcss\node_modules\source-map\lib\util.js:433:15)
    at new SourceMapConsumer (C:\server\htdocs\myproject\node_modules\postcss\node_modules\source-map\lib\source-map-consumer.js:17:22)
    at PreviousMap.consumer (C:\server\htdocs\myproject\node_modules\postcss\lib\previous-map.js:69:28)
    at new Input (C:\server\htdocs\myproject\node_modules\postcss\lib\input.js:93:22)
    at parse (C:\server\htdocs\myproject\node_modules\postcss\lib\parse.js:13:15)
    at new LazyResult (C:\server\htdocs\myproject\node_modules\postcss\lib\lazy-result.js:60:16)
    at Processor.<anonymous> (C:\server\htdocs\myproject\node_modules\postcss\lib\processor.js:138:12)
    at Processor.process (C:\server\htdocs\myproject\node_modules\postcss\lib\processor.js:117:23)
    at Function.creator.process (C:\server\htdocs\myproject\node_modules\postcss\lib\postcss.js:148:43)
    at OptimizeCssAssetsWebpackPlugin.processCss (C:\server\htdocs\myproject\node_modules\optimize-css-assets-webpack-plugin\src\index.js:73:21)
    at Object.processor (C:\server\htdocs\myproject\node_modules\optimize-css-assets-webpack-plugin\src\index.js:13:18)
    at C:\server\htdocs\myproject\node_modules\last-call-webpack-plugin\src\index.js:150:10
    at arrayEach (C:\server\htdocs\myproject\node_modules\lodash\_arrayEach.js:15:9)
    at forEach (C:\server\htdocs\myproject\node_modules\lodash\forEach.js:38:10)
    at OptimizeCssAssetsWebpackPlugin.process (C:\server\htdocs\myproject\node_modules\last-call-webpack-plugin\src\index.js:147:5)
    at C:\server\htdocs\myproject\node_modules\last-call-webpack-plugin\src\index.js:178:28
    at _next0 (eval at create (C:\server\htdocs\myproject\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:9:17)
    at eval (eval at create (C:\server\htdocs\myproject\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:25:1)
    at C:\server\htdocs\myproject\node_modules\terser-webpack-plugin\dist\index.js:321:9
    at step (C:\server\htdocs\myproject\node_modules\terser-webpack-plugin\dist\TaskRunner.js:87:9)
    at done (C:\server\htdocs\myproject\node_modules\terser-webpack-plugin\dist\TaskRunner.js:98:30)
    at tryCatcher (C:\server\htdocs\myproject\node_modules\bluebird\js\release\util.js:16:23)
    at Promise._settlePromiseFromHandler (C:\server\htdocs\myproject\node_modules\bluebird\js\release\promise.js:547:31)
    at Promise._settlePromise (C:\server\htdocs\myproject\node_modules\bluebird\js\release\promise.js:604:18)
    at Promise._settlePromise0 (C:\server\htdocs\myproject\node_modules\bluebird\js\release\promise.js:649:10)
    at Promise._settlePromises (C:\server\htdocs\myproject\node_modules\bluebird\js\release\promise.js:729:18)
    at Promise._fulfill (C:\server\htdocs\myproject\node_modules\bluebird\js\release\promise.js:673:18)
    at Promise._resolveCallback (C:\server\htdocs\myproject\node_modules\bluebird\js\release\promise.js:466:57)
    at Promise._settlePromiseFromHandler (C:\server\htdocs\myproject\node_modules\bluebird\js\release\promise.js:559:17)
    at Promise._settlePromise (C:\server\htdocs\myproject\node_modules\bluebird\js\release\promise.js:604:18)
    at Promise._settlePromise0 (C:\server\htdocs\myproject\node_modules\bluebird\js\release\promise.js:649:10)
    at Promise._settlePromises (C:\server\htdocs\myproject\node_modules\bluebird\js\release\promise.js:729:18)
    at Promise._fulfill (C:\server\htdocs\myproject\node_modules\bluebird\js\release\promise.js:673:18)
    at Promise._resolveCallback (C:\server\htdocs\myproject\node_modules\bluebird\js\release\promise.js:466:57)
    at Promise._settlePromiseFromHandler (C:\server\htdocs\myproject\node_modules\bluebird\js\release\promise.js:559:17)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ production: `cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ production script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Package.json 

{
  "private": true,
  "scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "npm run development -- --watch",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "lint": "eslint --fix --ext .js,.vue resources/js"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.17",
    "@fortawesome/free-brands-svg-icons": "^5.8.1",
    "@fortawesome/free-regular-svg-icons": "^5.8.1",
    "@fortawesome/free-solid-svg-icons": "^5.8.1",
    "@fortawesome/vue-fontawesome": "^0.1.6",
    "@inotom/vue-go-top": "^1.1.0",
    "algoliasearch": "^3.35.1",
    "axios": "^0.18.1",
    "bootstrap": "^4.3.1",
    "instantsearch.css": "^7.3.1",
    "jquery": "^3.4.1",
    "js-cookie": "^2.2.0",
    "popper.js": "^1.15.0",
    "sweetalert2": "^8.10.0",
    "v-tooltip": "^2.0.2",
    "vform": "^1.0.0",
    "vue": "^2.6.10",
    "vue-awesome-swiper": "^3.1.3",
    "vue-content-loader": "^0.2.2",
    "vue-foldable": "^1.0.0",
    "vue-fuse": "^2.1.2",
    "vue-i18n": "^8.11.2",
    "vue-instantsearch": "^2.6.0",
    "vue-lazyload": "^1.3.3",
    "vue-loading-overlay": "^3.2.0",
    "vue-lodash": "^2.0.2",
    "vue-meta": "^1.6.0",
    "vue-notification": "^1.3.20",
    "vue-observe-visibility": "^0.4.6",
    "vue-router": "^3.0.6",
    "vue-slider-component": "^3.0.42",
    "vue-slim-tabs": "^0.4.0",
    "vuelidate": "^0.7.4",
    "vuex": "^3.1.0",
    "vuex-router-sync": "^5.0.0"
  },
  "devDependencies": {
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "@babel/preset-env": "^7.4.4",
    "babel-eslint": "^10.0.1",
    "cross-env": "^5.2.0",
    "eslint": "^5.16.0",
    "eslint-config-standard": "^12.0.0",
    "eslint-plugin-import": "^2.17.2",
    "eslint-plugin-node": "^9.0.1",
    "eslint-plugin-promise": "^4.1.1",
    "eslint-plugin-standard": "^4.0.0",
    "eslint-plugin-vue": "^5.2.2",
    "extract-text-webpack-plugin": "^3.0.2",
    "glob-all": "^3.1.0",
    "laravel-mix": "^4.0.15",
    "laravel-mix-versionhash": "^1.0.7",
    "purgecss-webpack-plugin": "^1.6.0",
    "resolve-url-loader": "^2.3.1",
    "sass": "^1.20.1",
    "sass-loader": "^7.1.0",
    "vue-template-compiler": "^2.6.10",
    "webpack-bundle-analyzer": "^3.3.2"
  }
}

如果我删除extract-text-webpack-plugin并安装mini-css-extract-plugin：

C:\server\htdocs\myproject\node_modules\webpack-cli\bin\cli.js:93
                                throw err;
                                ^

Error: Cannot find module 'extract-text-webpack-plugin'
Require stack:
- C:\server\htdocs\myproject\node_modules\laravel-mix-versionhash\src\index.js
- C:\server\htdocs\myproject\webpack.mix.js
- C:\server\htdocs\myproject\node_modules\laravel-mix\setup\webpack.config.js
- C:\server\htdocs\myproject\node_modules\webpack-cli\bin\utils\convert-argv.js
- C:\server\htdocs\myproject\node_modules\webpack-cli\bin\cli.js
- C:\server\htdocs\myproject\node_modules\webpack\bin\webpack.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:797:15)
    at Function.Module._load (internal/modules/cjs/loader.js:690:27)
    at Module.require (internal/modules/cjs/loader.js:852:19)
    at require (C:\server\htdocs\myproject\node_modules\v8-compile-cache\v8-compile-cache.js:161:20)
    at Object.<anonymous> (C:\server\htdocs\myproject\node_modules\laravel-mix-versionhash\src\index.js:7:27)
    at Module._compile (C:\server\htdocs\myproject\node_modules\v8-compile-cache\v8-compile-cache.js:192:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
    at Module.load (internal/modules/cjs/loader.js:815:32)
    at Function.Module._load (internal/modules/cjs/loader.js:727:14)
    at Module.require (internal/modules/cjs/loader.js:852:19)
    at require (C:\server\htdocs\myproject\node_modules\v8-compile-cache\v8-compile-cache.js:161:20)
    at Object.<anonymous> (C:\server\htdocs\myproject\webpack.mix.js:4:1)
    at Module._compile (C:\server\htdocs\myproject\node_modules\v8-compile-cache\v8-compile-cache.js:192:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
    at Module.load (internal/modules/cjs/loader.js:815:32)
    at Function.Module._load (internal/modules/cjs/loader.js:727:14)
    at Module.require (internal/modules/cjs/loader.js:852:19)
    at require (C:\server\htdocs\myproject\node_modules\v8-compile-cache\v8-compile-cache.js:161:20)
    at Object.<anonymous> (C:\server\htdocs\myproject\node_modules\laravel-mix\setup\webpack.config.js:12:1)
    at Module._compile (C:\server\htdocs\myproject\node_modules\v8-compile-cache\v8-compile-cache.js:192:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
    at Module.load (internal/modules/cjs/loader.js:815:32)
    at Function.Module._load (internal/modules/cjs/loader.js:727:14)
    at Module.require (internal/modules/cjs/loader.js:852:19)
    at require (C:\server\htdocs\myproject\node_modules\v8-compile-cache\v8-compile-cache.js:161:20)
    at WEBPACK_OPTIONS (C:\server\htdocs\myproject\node_modules\webpack-cli\bin\utils\convert-argv.js:114:13)
    at requireConfig (C:\server\htdocs\myproject\node_modules\webpack-cli\bin\utils\convert-argv.js:116:6)
    at C:\server\htdocs\myproject\node_modules\webpack-cli\bin\utils\convert-argv.js:123:17
    at Array.forEach (<anonymous>)
    at module.exports (C:\server\htdocs\myproject\node_modules\webpack-cli\bin\utils\convert-argv.js:121:15)
    at C:\server\htdocs\myproject\node_modules\webpack-cli\bin\cli.js:71:45
    at Object.parse (C:\server\htdocs\myproject\node_modules\webpack-cli\node_modules\yargs\yargs.js:567:18)
    at C:\server\htdocs\myproject\node_modules\webpack-cli\bin\cli.js:49:8
    at Object.<anonymous> (C:\server\htdocs\myproject\node_modules\webpack-cli\bin\cli.js:366:3)
    at Module._compile (internal/modules/cjs/loader.js:959:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10) {
  code: 'MODULE_NOT_FOUND',

webpack.mix.js 

const path = require('path')
const fs = require('fs-extra')
const mix = require('laravel-mix')
require('laravel-mix-versionhash')
// const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
const PurgecssPlugin = require('purgecss-webpack-plugin')
const glob = require('glob-all')

mix
  .js('resources/js/app.js', 'public/dist/js')
  .sass('resources/sass/app.scss', 'public/dist/css')

  .disableNotifications()

if (mix.inProduction()) {
  mix.versionHash()
} else {
  mix.sourceMaps()
}

mix.webpackConfig({
  plugins: [
    // new BundleAnalyzerPlugin()
    new PurgecssPlugin({
      paths: glob.sync([
        path.join(__dirname, 'resources/js/**/*.vue'),
        path.join(__dirname, 'resources/js/**/*.js')
      ])
    }),
  ],
  resolve: {
    extensions: ['.js', '.json', '.vue'],
    alias: {
      '~': path.join(__dirname, './resources/js')
    }
  },
  output: {
    chunkFilename: 'dist/js/[chunkhash].js',
    path: mix.config.hmr ? '/' : path.resolve(__dirname, './public/build')
  }
})

mix.then(() => {
  if (!mix.config.hmr) {
    process.nextTick(() => publishAseets())
  }
})

function publishAseets () {
  const publicDir = path.resolve(__dirname, './public')

  if (mix.inProduction()) {
    fs.removeSync(path.join(publicDir, 'dist'))
  }

  fs.copySync(path.join(publicDir, 'build', 'dist'), path.join(publicDir, 'dist'))
  fs.removeSync(path.join(publicDir, 'build'))
}

enter image description here

0 个答案:

没有答案
相关问题
最新问题