Невозможно удалить операторы console с помощью babel или terser в vue cli 3/4, но второй запуск сборки работает - PullRequest
Новая
       113

Невозможно удалить операторы console с помощью babel или terser в vue cli 3/4, но второй запуск сборки работает

0 голосов
/ 21 июня 2020

У меня проблемы с npm run build, который фактически вызывает vue-cli-service build. Моя цель - удалить операторы console в производственных сборках. Однако с первого раза не получается. Если я немедленно запустил его снова (без изменений кода), он завершится успешно.

Для воспроизводимости и изоляции я запускаю код в узле docker: 

docker run --rm -it -v "$(pwd):/usr/src/app" node:14.4.0 /bin/bash

В docker Я настраиваю среду 

npm ci

В чистой среде запуск сборки завершается неудачно: 

root@bd366b5873ca:/usr/src/app# npm run build

> my-app@0.1.0 build /usr/src/app
> vue-cli-service build

PRODUCTION babel setup
production eslint setup.

⠦  Building for production...production eslint setup.
⠇  Building for production...PRODUCTION babel setup
⠼  Building for production...production eslint setup.
⠙  Building for production...

 ERROR  Failed to compile with 8 errors

Все ошибки - eslint ошибки при появлении команд console.: 

Module Error (from ./node_modules/eslint-loader/index.js):
error: Unexpected console statement (no-console) at XXXX

Повторный запуск сборки приводит к успешной сборке: 

root@bd366b5873ca:/usr/src/app# npm run build

> my-app@0.1.0 build /usr/src/app
> vue-cli-service build

PRODUCTION babel setup
production eslint setup.

⠏  Building for production...

 WARNING  Compiled with 2 warnings

PRODUCTION babel setup и production eslint setup происходят из моих babel.config.js и .eslint.rc.

Я настроил eslint следующим образом, чтобы он не выполнялся на операторах console. в производстве: 

# .eslintrc.js
if (process.env.NODE_ENV === 'production') {
  console.info('production eslint setup.')
}
module.exports = {
  root: true,

  env: {
    node: true
  },

  'plugins': ['jest'],

  'extends': [
    'eslint:recommended',
    'plugin:vue/recommended',
    '@vue/standard',
    'plugin:jest/recommended',
    'plugin:jest/style'
  ],

  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  },

  parserOptions: {
    parser: 'babel-eslint',
    parserOptions: {
      babelOptions: {
        configFile: "babel.config.js"
      }
    }
  }

}

Я настроил babel для удаления операторов console.: 

# babel.config.js
/* eslint-disable no-var */
module.exports = (api) => {
  var isProd = api.cache.invalidate(() => process.env.NODE_ENV === 'production')
  var plugins = []
  if (isProd) {
    console.info('PRODUCTION babel setup')
    plugins.push(['transform-remove-console', { exclude: [] }])
  }
  return {
    presets: ['@vue/cli-plugin-babel/preset'],
    plugins
  }
}

В попытках исправить это, я также настроил terser для удаления операторов console.: 

# vue.config.js
module.exports = {
  'transpileDependencies': [
    'vuetify'
  ],
  publicPath: process.env.PUBLIC_SUB_PATH === ''
    ? '/' : '/' + process.env.PUBLIC_SUB_PATH + '/',
  runtimeCompiler: true,
  css: {
    extract: { ignoreOrder: true }
  },
  chainWebpack: config => {
    config.optimization.minimize = true
    config.optimization.minimizer('terser').tap((args) => {
      args[0].terserOptions.compress.drop_console = true
      return args
    })
  }
}

Версии (от package.json). В попытке исправить это, обновился до vue -cli 4, также произошло в vue -cli 3: 

....
"dependencies": {
    "axios": "^0.19.2",
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "vue-router": "^3.3.4",
    "vuetify": "^2.3.1",
    "vuex": "^3.4.0"
  },
....
"devDependencies": {
    "@babel/core": "^7.10.3",
    "@babel/preset-env": "^7.10.3",
    "@vue/cli-service": "^4.4.4",
    "babel-eslint": "^10.1.0"
    "babel-loader": "^8.1.0",
    "babel-plugin-transform-remove-console": "^6.9.4",
    "eslint": "^5.16.0",
    ...
}

Вопрос:

Консоль печатает PRODUCTION babel setup и production eslint setup показывают, что в чистой сборке конфигурация загружается несколько раз. Потом как-то не получается. Повторный запуск кажется более простым, конфиги загружаются один раз, а затем успешно.

Как мне настроить vue для успешной сборки в первый раз, удалив консольные операторы?

Это кеш?

После успешной сборки удаление кеша: 

rm -Rf ./node_modules/.cache

с последующим его построением (npm run build) равно первому запуску: сбой

Современная сборка?

При создании modern сборки (после npm run build для заполнения кеша): 

 npm run build -- --modern

Успешно создает устаревшую сборку, но не выполняет современные build: 

> my-app@0.1.0 build /usr/src/app
> vue-cli-service build "--modern"

PRODUCTION babel setup
production eslint setup.

⠏  Building legacy bundle for production...

 WARNING  Compiled with 2 warnings          

....
PRODUCTION babel setup
production eslint setup.

⠹  Building modern bundle for production...PRODUCTION babel setup
⠧  Building modern bundle for production...PRODUCTION babel setup
⠋  Building modern bundle for production...PRODUCTION babel setup
⠏  Building modern bundle for production...PRODUCTION babel setup
PRODUCTION babel setup
⠹  Building modern bundle for production...PRODUCTION babel setup
⠧  Building modern bundle for production...PRODUCTION babel setup
⠦  Building modern bundle for production...

 ERROR  Failed to compile with 3 errors 

Module Error (from ./node_modules/thread-loader/dist/cjs.js):

/usr/src/app/src/axios.js
   7:3  error  Unexpected console statement  no-console

Повторный запуск современной сборки сразу после успешного завершения. Таким образом, мне нужно в общей сложности 3 запуска для успешной современной сборки (первый раз унаследованный пакет не работает, второй раз унаследованный пакет завершается успешно, но современная сборка терпит неудачу, третий раз унаследованная и современная сборка завершается успешно).

1 Ответ

0 голосов
/ 31 июля 2020

Я встретил ту же ошибку, и я исправил ее, добавив lintOnSave: process.env.NODE_ENV === 'development' в vue.config.js. Ниже приведен контрольный список, который поможет вам исправить проблему:

  • npx vue-cli-service inspect --mode production >> webpack.config.production.js сгенерировать файл конфигурации веб-пакета в производстве
  • тогда вы увидите, что lint предшествует terser. Он делает первый раз yarn build сбой, а следующий раз - успешным
  • , поэтому в этом случае вы можете отключить lintOnSave в производстве

О lintOnsave

...