I'm trying to use the --mange-regex option which is documented on UglifyJS2's GItHub README. The problem is, my build uses gulp-uglify, and it isn't clearly documented how I should use --mangle-regex without the command line.
My goal is to mangle 'private' identifiers (matching /^_/)
I've tried:
// Gulp setup code left out for brevity (I'm using gulp.src() etc properly)
uglify({
mangle: {
toplevel: false
},
mangleProperties: {
regex: /^_/
}
});
and
// Gulp setup code left out for brevity (I'm using gulp.src() etc properly)
uglify({
mangle: {
regex: /^_/
}
});
Nothing's doin' here. A little help?
Turns out that the feature is only enabled in the master branch of Uglify as of this writing. The correct syntax, will be:
uglify({
mangleProperties: {
regex: /^_/
}
});
This is now supported but the syntax has changed a little. instead of mangleProperties it's now a 'properties' object inside a 'mangle' object:
Here's my complete code taken from my gulpfile.js, which works as of May 2020:
uglify = require('gulp-uglify');
...
const uglifyOptions = {
mangle: {
properties: { regex: /^_/ }
}
}
...
.pipe( uglify( uglifyOptions ) )
Related
I was starting to work with a web application built with TypeScript/React/Storybook. I noticed when I write a class:
class MyClass {
constructor(public a) { }
}
console.log(MyClass);
and run the unit tests with jest, or using tsc to emit code, it generates the expected JS code like:
function MyClass(a) {
this.a = a;
}
But when I run it in a Storybook app with development server, it prints out the JS code like:
function MyClass(a) {
_classCallCheck(this, MyClass);
}
I'm thinking if it's related to the TypeScript compiler version picked by ts-loader, but cannot figure it out. I checked the TypeScript version installed to my node_modules folder, and it's v4.1.2, which looks nothing wrong with me.
Also I mentioned Playbook here (and left "playbook" in the tags) only because my app is with it. It might not be directly related to this issue.
Seems like an issue with recent versions #babel/preset-typescript if you are using it. You can change your babel configuration to use "#babel/plugin-transform-typescript" plugin instead of #babel/preset-typescript preset.
More info: https://www.gitmemory.com/issue/babel/babel/8752/486541662
If generated by storybook, your babel config probably looks like:
module.exports = {
presets: [
["#babel/preset-env", { targets: { node: "current" } }],
"#babel/preset-typescript",
],
};
Then change it to:
module.exports = {
presets: [["#babel/preset-env", { targets: { node: "current" } }]],
plugins: ["#babel/plugin-transform-typescript"],
};
I'm trying to add customMedia option to my postcss-cssnext features config with importFrom file location, but that doesnt work and I dont have any errors on project build, only final Missing #custom-media definition for '--small-viewport'. The entire rule has been removed from the output. when I'm trying to use the media. How do I debug this?
module.exports = {
plugins: [
require('postcss-import')(),
require('postcss-nested')(),
require('postcss-simple-vars')({
variables: {
...require('./src/ui/variables')
}
}),
require('postcss-cssnext')({
features: {
customProperties: false,
browsers: ['> 0.5%, last 2 versions, Firefox ESR, not dead'],
customMedia: {
importFrom: require('path').join(__dirname, './src/ui/custom-media.css')
}
},
}),
require('cssnano')({
autoprefixer: false,
zindex: false,
reduceIdents: false,
discardComments: { removeAll: true },
discardUnused: { fontFace: false },
colormin: false,
}),
]
};
Okay so as per postcss-custom-media CHANGELOG importFrom was added only in 7.0.0 while my cssnext uses 6.0.0. As CSSNext is deprecated I will switch to postcss-preset-env
you know how to use custom media in postcss-preset-env, they work for me only if you create a custom media in the component and refer to it if I want to take custom media from index.css or vars.css they do not work , with variables everything is fine
I'm new to Protractor and trying to figure out how can I take screenshot when my tests are failing.. I've already tried to use protractor-jasmine2-screenshot-reporter but it does not seem to work..
Anyone uses a different plugin that works? or have any idea why the above one doesn't?
Thanks.
Run following commands to install Protractor html ScreenShot report
$ npm install protractor-html-screenshot-reporter --save-dev
after this update your Protractor.conf.js with
var Jasmine2HtmlReporter = require('/usr/lib/node_modules/protractor-jasmine2-html-reporter');
onPrepare() {
jasmine.getEnv().addReporter(
new Jasmine2HtmlReporter({
savePath: 'Mention location of your test result',
fileName: 'Test Result',
fileNameDateSuffix: true ,
takeScreenShotsOnlyForFailedSpecs: true,
}),
new SpecReporter({ spec: { displayStacktrace: true } })
);
In this location it will create a seprate folder called "ScreenShots" and saves all the screenshot here
"savePath: 'Mention location of your test result'"
From http://www.protractortest.org/#/debugging#taking-screenshots
// at the top of the test spec:
var fs = require('fs');
// ... other code
// abstract writing screen shot to a file
function writeScreenShot(data, filename) {
var stream = fs.createWriteStream(filename);
stream.write(new Buffer(data, 'base64'));
stream.end();
}
// ...
// within a test:
browser.takeScreenshot().then(function (png) {
writeScreenShot(png, 'exception.png');
});
Eventually I've found some gitHub repo that helped me.
If anyone encounters problems resolving the issue, you can use :
https://gist.github.com/jlouros/190d654850f8e2ed7b51ed6267f30400
Works great for me.
I'm pretty new in React, coming from Angular. I'm writing some tests for the code that's going to send request to an external endpoint. Obviously, I don't want to hardcode a real host in production code so I thought I could use webpack's DefinePlugin to keep this in a constant.
How to configure Webpack and Jest together to use Webpack's capabilities?
It's just like that in your package.json or jest.config.js :
"jest": {
"globals": {
"__DEV__": true
}
}
If you still have any problems, please check the jest offical docs here:
globals-object
As explained in comments:
/globals.js
module.exports = {
__DEV__: true
}
/webpack.config.js
const globals = require('./globals.js')
// ...
plugins: [
new webpack.DefinePlugin(globals)
]
/jest.config.js
const globals = require('./globals.js')
module.exports = {
// ...
globals,
}
Hi everyone I am trying to make r.js work but i got error on Google Analytics like this
Tracing dependencies for: main
Cannot optimize network URL, skipping: //www.google-analytics.com/analytics.js
this is my requierjs.config file
window.GoogleAnalyticsObject = "__ga__";
window.__ga__ = function() {
for (var i=0; i<arguments.length; i++) {
var arg = arguments[i];
if (arg.constructor == Object && arg.hitCallback) {
arg.hitCallback();
}
}
};
window.__ga__.q = [["create", "UA-82626142-1", "auto"]];
window.__ga__.l = Date.now();
paths: {
ga: "//www.google-analytics.com/analytics"
},
shim: {
"ga": {
exports: "__ga__"
},
}
and this is my r.js config file
{
baseUrl: "../js",
name: "main",
out: 'app-built.js',
findNestedDependencies: true,
paths: {
ga: "//www.google-analytics.com/analytics",
},
include: 'requireLib',
mainConfigFile: "../js/main.js",
}
I have used ''empty path for r.js config but i dosn`t work. Thanks in advance
I have checked Requierjs documantation again and again and i found the right way to make cdns(urls) optimize with r.js. Need write in optimize config file
paths: {
....
ga:'empty'
}
we can write 'empty' for any cdn link just need use console command when we run optimize config file like this (this is my own example from my app)
'node build/r.js -o build/build.single.js paths.ga=empty:'
Hope this will be usfulle for others who have same probleme