I'm using VUE CLI 3 and I need to remove the console.log and code comments from the production built. This is my Terser setup:
webpack.config.js in src folder
module.exports = {
mode: 'production',
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
terserOptions: {
ecma: undefined,
warnings: false,
parse: {},
compress: {drop_debugger},
mangle: true, // Note `mangle.properties` is `false` by default.
module: false,
output: null,
toplevel: false,
nameCache: null,
ie8: false,
keep_classnames: undefined,
keep_fnames: false,
safari10: false,
},
}),
],
},
};
My production workflow: Run npm run build -> cd dist -> npm run serve
The production build still outputs all console.log statements and shows code comments (<!-- -->).
What do I need to change to remove them?
First of all: make sure you are configuring Terser correctly:
terserOptions: {
ecma: 6,
compress: { drop_console: true },
output: { comments: false, beautify: false }
}
npm run serve
is usually a shortcut for:
vue-cli-service
vue-cli-service --help
Usage: vue-cli-service <command> [options]
Commands:
serve start development server
build build for production
inspect inspect internal webpack config
lint lint and fix source files
So when your workflow is the above mentioned npm run build -> cd dist -> npm run serve then you are actually starting the dev server, which does not apply Terser.
In order to run the production build you can use any webserver capable of serving static content:
NodeJs examples:
npm install -g serve
serve -s dist
or
npm install -g node-static
static dist
I'm attempting to update our angular 5 application to angular 6, and am running into a build issue currently with awesome-typescript loader.
The full error message is
C:\source\ProjectFolder\Angular.Web.App\node_modules\awesome-typescript-loader\src\watch-mode.ts:5
compiler.hooks.run.tapAsync('at-loader', function(params, callback) {
^
TypeError: Cannot read property 'run' of undefined
at CheckerPlugin.apply (C:\source\ProjectFolder\Angular.Web.App\node_modules\awesome-typescript-loader\src\watch-mode.ts:5:18)
at Compiler.apply (C:\source\ProjectFolder\Angular.Web.App\node_modules\tapable\lib\Tapable.js:375:16)
at webpack (C:\source\ProjectFolder\Angular.Web.App\node_modules\webpack\lib\webpack.js:33:19)
at options.map.options (C:\source\ProjectFolder\Angular.Web.App\node_modules\webpack\lib\webpack.js:23:55)
at Array.map (<anonymous>)
at webpack (C:\source\ProjectFolder\Angular.Web.App\node_modules\webpack\lib\webpack.js:23:40)
at processOptions (C:\source\ProjectFolder\Angular.Web.App\node_modules\webpack\bin\webpack.js:335:15)
at yargs.parse (C:\source\ProjectFolder\Angular.Web.App\node_modules\webpack\bin\webpack.js:397:2)
at Object.Yargs.self.parse (C:\source\ProjectFolder\Angular.Web.App\node_modules\webpack\node_modules\yargs\yargs.js:533:18)
at Object.<anonymous> (C:\source\ProjectFolder\Angular.Web.App\node_modules\webpack\bin\webpack.js:152:7)
at Module._compile (module.js:643:30)
at Object.Module._extensions..js (module.js:654:10)
at Module.load (module.js:556:32)
at tryModuleLoad (module.js:499:12)
at Function.Module._load (module.js:491:3)
at Function.Module.runMain (module.js:684:10)
at startup (bootstrap_node.js:187:16)
at bootstrap_node.js:608:3
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! Angular.Web.App#1.0.0-rc3 build:webpack: `webpack --progress --color`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the Angular.Web.App#1.0.0-rc3 build:webpack 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! C:\Users\UserAccount\AppData\Roaming\npm-cache\_logs\2019-06-20T21_07_09_890Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! Angular.Web.App#1.0.0-rc3 build:dev: `npm run build:vendor && npm run build:webpack`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the Angular.Web.App#1.0.0-rc3 build:dev 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! C:\Users\UserAccount\AppData\Roaming\npm-cache\_logs\2019-06-20T21_07_09_936Z-debug.log
it is required, as our webpack is pulling in its CheckerPlugin
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;
module.exports = (env) => {
// Configuration in common to both client-side and server-side bundles
const isDevBuild = !(env && env.prod);
const sharedConfig = {
stats: { modules: false },
context: __dirname,
resolve: { extensions: [ '.js', '.ts' ] },
output: {
filename: '[name].js',
publicPath: 'dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix
},
module: {
rules: [
{ test: /\.ts$/, use: isDevBuild ? ['angular2-template-loader', 'angular2-router-loader'] : '#ngtools/webpack' },
{ test: /\.html$/, use: 'html-loader?minimize=false' },
{ test: /\.css$/, use: [ 'to-string-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize' ] },
{ test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' },
...sharedModuleRules
]
},
plugins: [new CheckerPlugin()]
};
currenlty using awesome-typescript-loader v. 5.0.0
I have a VueJS app that has the default Nightwatch E2E tests. I just spent some time getting user accounts and auth set up. After doing so, when I try to run my E2E tests, they fail mysteriously. Here's the command line output I get:
code/premium-poker-tools [master●] » npm run e2e
> premium-poker-tools#1.0.0 e2e /Users/adamzerner/code/premium-poker-tools
> node test/e2e/runner.js
> Starting dev server...
Starting to optimize CSS...
> Listening at http://localhost:8080
Starting selenium server... started - PID: 58502
[BABEL] Note: The code generator has deoptimised the styling of "/Users/adamzerner/code/premium-poker-tools/test/e2e/specs/hit-calculator.js" as it exceeds the max of "500KB".
player
1
2
3
1) "before all" hook
0 passing (2s)
1 failing
1) player "before all" hook:
Connection refused! Is selenium server started?
npm ERR! code ELIFECYCLE
npm ERR! errno 10
npm ERR! premium-poker-tools#1.0.0 e2e: `node test/e2e/runner.js`
npm ERR! Exit status 10
npm ERR!
npm ERR! Failed at the premium-poker-tools#1.0.0 e2e 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! /Users/adamzerner/.npm/_logs/2019-05-23T19_47_08_016Z-debug.log
code/premium-poker-tools [master●] »
And here is /Users/adamzerner/.npm/_logs/2019-05-27T17_44_07_557Z-debug.log:
0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/Cellar/node/11.11.0/bin/node',
1 verbose cli '/usr/local/bin/npm',
1 verbose cli 'run',
1 verbose cli 'e2e' ]
2 info using npm#6.9.0
3 info using node#v11.11.0
4 verbose run-script [ 'pree2e', 'e2e', 'poste2e' ]
5 info lifecycle premium-poker-tools#1.0.0~pree2e: premium-poker-tools#1.0.0
6 info lifecycle premium-poker-tools#1.0.0~e2e: premium-poker-tools#1.0.0
7 verbose lifecycle premium-poker-tools#1.0.0~e2e: unsafe-perm in lifecycle true
8 verbose lifecycle premium-poker-tools#1.0.0~e2e: PATH: /usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/Users/adamzerner/code/premium-poker-tools/node_modules/.bin:/Library/Frameworks/Python.framework/Versions/3.6/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Users/adamzerner/.rvm/bin
9 verbose lifecycle premium-poker-tools#1.0.0~e2e: CWD: /Users/adamzerner/code/premium-poker-tools
10 silly lifecycle premium-poker-tools#1.0.0~e2e: Args: [ '-c', 'node test/e2e/runner.js' ]
11 silly lifecycle premium-poker-tools#1.0.0~e2e: Returned: code: 10 signal: null
12 info lifecycle premium-poker-tools#1.0.0~e2e: Failed to exec e2e script
13 verbose stack Error: premium-poker-tools#1.0.0 e2e: `node test/e2e/runner.js`
13 verbose stack Exit status 10
13 verbose stack at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:301:16)
13 verbose stack at EventEmitter.emit (events.js:197:13)
13 verbose stack at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack at ChildProcess.emit (events.js:197:13)
13 verbose stack at maybeClose (internal/child_process.js:984:16)
13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:265:5)
14 verbose pkgid premium-poker-tools#1.0.0
15 verbose cwd /Users/adamzerner/code/premium-poker-tools
16 verbose Darwin 18.6.0
17 verbose argv "/usr/local/Cellar/node/11.11.0/bin/node" "/usr/local/bin/npm" "run" "e2e"
18 verbose node v11.11.0
19 verbose npm v6.9.0
20 error code ELIFECYCLE
21 error errno 10
22 error premium-poker-tools#1.0.0 e2e: `node test/e2e/runner.js`
22 error Exit status 10
23 error Failed at the premium-poker-tools#1.0.0 e2e script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 10, true ]
For one, the Connection refused! Is selenium server started? error seems wrong. Above that it says Starting selenium server... started - PID: 58502, and I see a Chrome browser pop up very briefly and then immediately close.
Here is the code for the before block in question:
before(function (browser, done) {
console.log(1);
equityCalculator = browser.page['equity-calculator']();
console.log(2);
equityCalculator.navigate();
console.log(3);
browser.pause(20000);
equityCalculator
.waitForElementVisible('#app', 50000, function () {
console.log(4);
browser.resizeWindow(1440, 852, function () {
console.log(5);
done();
});
})
;
});
I've been trying to pin down where the problem occurs, but I'm having a lot of trouble. 1, 2, and 3 get logged out, but not 4 or 5, so that helps. But if 3 gets logged out, why isn't browser.pause(20000) working?
I've also been trying to mess around in my actual code to see where the issue is. I tried some alert statements in main.js to try to pinpoint the issue:
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
alert(1);
window.$ = require('jquery');
require('bootstrap');
alert(2);
import Vue from 'vue';
import store from '#/store';
import App from './App';
import router from './router';
import monkeyPatches from '#/services/monkey-patches';
import axios from 'axios';
import VueAxios from 'vue-axios';
alert(3);
Vue.config.productionTip = false
Vue.use(VueAxios, axios);
axios.interceptors.request.use(
function(config) {
config.withCredentials = true;
return config;
},
function(error) {
return Promise.reject(error);
}
);
/* eslint-disable no-new */
new Vue({
el: '#app',
router: router,
store: store,
template: '<App/>',
components: { App }
});
$(function () {
$('[data-toggle="popover"]').popover();
});
// if (navigator.serviceWorker) {
// navigator.serviceWorker.register('/service-worker.js').catch(function() {
// console.log('Service worker registration failed.');
// });
// }
But weirdly, alert(1) isn't even working. So I feel at a loss. From what I understand, the top of main.js is the "beginning" of a Vue app, and if it's not even reaching that point, what is going on? equityCalculator = browser.page['equity-calculator'](); and equityCalculator.navigate(); seem pretty standard. Here's a snippet of the page object:
module.exports = {
url: 'http://localhost:8080/equity-calculator',
elements: {
'app': '#app',
When I start my dev server and go to that url, it totally works. And my E2E tests were all working perfectly before I implemented user accounts and auth, I didn't change this file, and yet now I'm having the issue.
I'm not sure where I can go from here. Help!
Update:
Excerpt from package.json:
{
...
"dependencies": {
...
"chromedriver": "^2.45.0",
"cross-spawn": "^6.0.5",
"nightwatch": "^0.9.21",
"selenium-server": "^3.141.59",
},
}
Here's nightwatch.conf.js:
require('babel-register')
let config = require('../../config')
// http://nightwatchjs.org/gettingstarted#settings-file
module.exports = {
src_folders: ['test/e2e/specs'],
output_folder: 'test/e2e/reports',
custom_assertions_path: ['test/e2e/custom-assertions'],
page_objects_path: 'test/e2e/page-objects',
globals_path: 'test/e2e/globals.js',
test_runner : 'mocha',
selenium: {
start_process: true,
server_path: require('selenium-server').path,
host: '127.0.0.1',
port: 4444,
cli_args: {
'webdriver.chrome.driver': require('chromedriver').path
}
},
test_settings: {
default: {
selenium_port: 4444,
selenium_host: 'localhost',
silent: true,
globals: {
devServerURL: 'http://localhost:' + (process.env.PORT || config.dev.port),
handStrings: [
'aa', 'aks', 'aqs', 'ajs', 'ats', 'a9s', 'a8s', 'a7s', 'a6s', 'a5s', 'a4s', 'a3s', 'a2s',
'ako', 'kk', 'kqs', 'kjs', 'kts', 'k9s', 'k8s', 'k7s', 'k6s', 'k5s', 'k4s', 'k3s', 'k2s',
'aqo', 'kqo', 'qq', 'qjs', 'qts', 'q9s', 'q8s', 'q7s', 'q6s', 'q5s', 'q4s', 'q3s', 'q2s',
'ajo', 'kjo', 'qjo', 'jj', 'jts', 'j9s', 'j8s', 'j7s', 'j6s', 'j5s', 'j4s', 'j3s', 'j2s',
'ato', 'kto', 'qto', 'jto', 'tt', 't9s', 't8s', 't7s', 't6s', 't5s', 't4s', 't3s', 't2s',
'a9o', 'k9o', 'q9o', 'j9o', 't9o', '99', '98s', '97s', '96s', '95s', '94s', '93s', '92s',
'a8o', 'k8o', 'q8o', 'j8o', 't8o', '98o', '88', '87s', '86s', '85s', '84s', '83s', '82s',
'a7o', 'k7o', 'q7o', 'j7o', 't7o', '97o', '87o', '77', '76s', '75s', '74s', '73s', '72s',
'a6o', 'k6o', 'q6o', 'j6o', 't6o', '96o', '86o', '76o', '66', '65s', '64s', '63s', '62s',
'a5o', 'k5o', 'q5o', 'j5o', 't5o', '95o', '85o', '75o', '65o', '55', '54s', '53s', '52s',
'a4o', 'k4o', 'q4o', 'j4o', 't4o', '94o', '84o', '74o', '64o', '54o', '44', '43s', '42s',
'a3o', 'k3o', 'q3o', 'j3o', 't3o', '93o', '83o', '73o', '63o', '53o', '43o', '33', '32s',
'a2o', 'k2o', 'q2o', 'j2o', 't2o', '92o', '82o', '72o', '62o', '52o', '42o', '32o', '22',
],
}
},
chrome: {
desiredCapabilities: {
browserName: 'chrome',
javascriptEnabled: true,
acceptSslCerts: true
}
},
firefox: {
desiredCapabilities: {
browserName: 'firefox',
javascriptEnabled: true,
acceptSslCerts: true
}
}
}
}
And for Java/JDK:
code/premium-poker-tools-api [master] » java --version
java 9.0.4
Java(TM) SE Runtime Environment (build 9.0.4+11)
Java HotSpot(TM) 64-Bit Server VM (build 9.0.4+11, mixed mode)
When I look in my Java Control Panel, it says that I'm up to date.
I'm not sure how to figure out which Selenium version or Chrome version I'm using. For Chrome, if I open up Chrome and go to "About Google Chrome" it says 74.0.3729.169, the up to date one, and I assume my tests are using that same version.
This log message...
Starting selenium server... started - PID: 58502
and the subsequent error message...
Connection refused! Is selenium server started?
...implies that the WebDriver instance i.e. ChromeDriver though initiated but was unable to communicate with the WebBrowsing i.e. Chrome session.
Some more details about the:
Selenium version.
JDK version.
Selenium Server mode (Standalone/Grid).
ChromeDriver version.
Chrome version.
Would have helped us to debug the issue in a better way. However as you have mentioned "1, 2, and 3 get logged out, but not 4 or 5", possibly the issue stems out from the following code block:
equityCalculator
.waitForElementVisible('#app', 50000, function () {
console.log(4);
browser.resizeWindow(1440, 852, function () {
console.log(5);
done();
});
})
Reason
As per the discussion Connection refused! Is selenium server started nightwatch on edge your main issue seems to be incompatibility between the version of the binaries you are using.
Solution
Upgrade JDK to recent levels JDK 8u212.
Upgrade Selenium to current levels Version 3.141.59.
Upgrade ChromeDriver to ChromeDriver v74.0 level.
Upgrade Chrome version to Chrome v74 levels. (as per ChromeDriver v74.0 release notes)
Clean your Project Workspace through your IDE and Rebuild your project with required dependencies only.
If your base Web Client version is too old, then uninstall it and install a recent GA and released version of Web Client.
Take a System Reboot.
Execute your #Test.
Always invoke driver.quit() within tearDown(){} method to close & destroy the WebDriver and Web Client instances gracefully.
Outro
'Connection refused! Is selenium server started?\n' while running Nightwatch.js tests against Selenium Grid
Resolution
updating npm resolved the issue (as per OP's comments)
npm update
The Jest documentation suggests using npm test to execute tests.
Is there a way of watching your source and tests to rerun Jest tests automatically when relevant files have been changed?
Thanks to Erin Stanfill for pointing out, Jest already has support for automatically re-running. The better configuration for package.json would be
{
"scripts": {
"test": "jest"
}
}
To turn on the watch mode, just use
$ npm run test -- --watch
Or
$ yarn run test --watch
If you have npm test configured, you can just run npm test -- --watch.
As a complement suggestion you can add "--watchAll"
into your package.json file like this:
"scripts": {
"test": "jest --watchAll"
},
Each time you run npm test, the watch mode will be enable by default.
For more info npm CLI docs
Start you tests in watch mode.
jest --watch fileName.test.js
As per documentation
Run tests that match this spec name (match against the name in describe or test, basically).
jest -t name-of-spec
// or in watch mode
jest --watch -t="TestName"
This example shows how to use gulp to run your Jest tests using jest-cli, as well as a tdd gulp task to watch files and rerun Jest tests when a file changes:
var gulp = require('gulp');
var jest = require('jest-cli');
var jestConfig = {
rootDir: 'source'
};
gulp.task('test', function(done) {
jest.runCLI({ config : jestConfig }, ".", function() {
done();
});
});
gulp.task('tdd', function(done) {
gulp.watch([ jestConfig.rootDir + "/**/*.js" ], [ 'test' ]);
});
gulp.task('default', function() {
// place code for your default task here
});
install a couple of Grunt packages:
npm install grunt-contrib-watch grunt-exec --save-dev
make a Gruntfile.js with the following:
module.exports = function(grunt) {
grunt.initConfig({
exec: {
jest: 'node node_modules/jest-cli/bin/jest'
},
watch: {
files: ['**/*.js'],
tasks: ['exec:jest']
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-exec');
}
then simply run:
grunt watch
If you want to run a single file in watch mode:
yarn run test --watch FileName.test.jsx
I personally use the npm package jest-watch-typeahead.
You need to do 3 steps:
Install npm packege:
npm install --save-dev jest jest-watch-typeahead
Add to jest.config.js next code:
module.exports = {
watchPlugins: [
'jest-watch-typeahead/filename',
'jest-watch-typeahead/testname',
],
};
Run Jest in watch mode
yarn jest --watch