Develop Reference

How to configure eslint with files to include?

I have a react native application that doesn't follow the convention of having all files in src directory. It appears eslint looks for the src directory by default.
How can I tell eslint to look for ./components', ./screens' etc instead?
Passing in the path when running eslint works but that means those files only get checked when that command gets ran instead of allowing my text editor to detect issues.
"lint": "eslint ./**/*.tsx"
I have tried adding include paths to my eslint config too but that doesn't make any difference.
module.exports = {
env: {
browser: true,
es2021: true,
'react-native/react-native': true,
},
extends: [
'plugin:react/recommended',
'standard-with-typescript',
'plugin:react-native-a11y/android'
],
overrides: [
],
parser: '#typescript-eslint/parser',
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
project: './tsconfig.json'
},
plugins: [
'react',
'react-native'
],
rules: {
indent: ['error', 2],
'linebreak-style': [
'error',
'unix'
],
semi: [
'error',
'always'
]
},
includePaths: ["./**/*.tsx"] // this doesn't seem to have any effect
};
I want to be able to run eslint and not have to pass in any optional args as it should be defined already within my eslint config.

Why is no sourcemap generated when minimizing source?

I need to add source-maps to a Webpack 4 production build.
I am using the following config:
{
…
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
sourceMap: true,
}),
],
},
devtool: 'source-map'
…
}
However, although this minimises the bundle, it results in a virtually empty source-map at main.js.map:
{"version":3,"file":"main.js","sources":["webpack://AdminFrontend/main.js"],"mappings":";AAAA","sourceRoot":""}
If i set minimize to false, I get a full source-map, but the bundle is enormous.
What do I need to do to both minimize the source AND generate a full sourcemap?

you can customize webpack minimizer config like this
const minify = (input, sourceMap, minimizerOptions, extractsComments) => {
const { sourceMap: uglifySourceMap, code } = require('uglify-js').minify(input);
return { map: sourceMap, code, warnings: [], errors: [], extractedComments: [] };
}
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
sourceMap: true,
parallel: true,
minify: minify,
}),
],
},
after do that you will get full content map file

How to use Webpack & Terser to only compress code

I'm attempting to use webpack to compress my code (remove new lines and whitespaces) and nothing else. I don't want any webpack__require__, no mangling, no uglifying, simply just remove whitespace and new lines.
What options in terser/webpack do I have to put to achieve this?
let bundle = {
mode: 'production',
target: 'web',
entry: path.resolve(__dirname, './res/') + '/bundle.js',
output: {
path: path.resolve(__dirname, './res/'),
filename: 'minified.js',
},
optimization: {
minimizer: [
new TerserPlugin({
terserOptions: {
ecma: undefined,
warnings: false,
parse: {},
compress: {},
mangle: false,
module: false,
toplevel: false,
keep_classnames: true,
keep_fnames: true,
}
})
]
}
};
Doesn't seem to do it. Thank you in advance.

Just to build on felismosh's answer for the CLI you will want to not include the --mangle or --compress commands if all you want to do is remove whitespace and newlines.
So it would be something more like:
terser original-file.js -o minified-file.js.
Mangle and compress are disabled unless turned on explicitly in the CLI command.

This will disable compression and use the output option for removing comments. The extractComments property prevents the plugin from extracting comments to a text file.
module.exports = {
/* ... */
optimization: {
minimizer: [
new TerserPlugin({
terserOptions: {
compress: false,
output: {
comments: false,
},
},
extractComments: false,
}),
],
},
};

just use terser directly without webpack.
Run npm i terser to install it, then you will have 2 choices:
Using it's cli, terser --compress --mangle -- input.js.
Using it's api from node,
const Terser = require('terser');
const code = {
'file1.js': 'function add(first, second) { return first + second; }',
'file2.js': 'console.log(add(1 + 2, 3 + 4));',
};
const options = {
ecma: undefined,
warnings: false,
parse: {},
compress: {},
mangle: false,
module: false,
toplevel: false,
keep_classnames: true,
keep_fnames: true,
};
const result = Terser.minify(code, options);
console.log(result.code);

Using underscore with jshint

I'm using the underscore library.
I get this when running jshint:
[L38:C38] W117: '_' is not defined.
var approvedAndRequstedCount = _.countBy(products, function(obj) {
Warning: Task "jshint:all" failed. Use --force to continue.
This is my config file:
{
"node": true,
"browser": true,
"esnext": true,
"bitwise": true,
"camelcase": false,
"curly": true,
"eqeqeq": true,
"immed": true,
"indent": 2,
"latedef": true,
"newcap": true,
"noarg": true,
"quotmark": "single",
"regexp": true,
"undef": true,
"unused": true,
"strict": true,
"trailing": true,
"smarttabs": true,
"globals": {
"angular": false
}
}
I guess it's something with the globals option? I tried to add "_": false but no luck. Any ideas?

I had this issue as well.
I installed underscore: bower install -save underscore and it worked fine in the code. Unfortunately jshint was not finding that reference. You must tell jshint about your global variables in configuration file like .jshintrc:
{
…
"globals": {
"angular": false,
"_": false
}
}
If you continue to have this issue you need to make sure that underscore is included when jshint is executed. I would not recommend setting -W117 to true. Squelching those errors might lead to more bugs.

How to import external files in a optimized requirejs project?

I am developing a RequireJs project, which one I was able to run R.js on it. I need to exclude a config file from the optimizer and be able to read it from the optimized javascript. I could do the first half of my problem with the following app.build.js:
({
appDir: ".",
baseUrl: "js",
mainConfigFile: 'js/main.js',
paths: {
requireLib: 'libs/require/require-min',
jqm: 'libs/jqueryMobile/jquery.mobile-1.3.0.min'
},
modules: [
{
name: "main",
include: ["requireLib","jqm"],
excludeShallow: [
"config/conf"
]
}
],
optimize: "none"
})
What I couldn't achieve is to read config/conf properties from main.js (final js with everything).
Any idea about how I can tackle this problem?
Thanks

I think you need to move the config to the exclude seccion and add config to the path seccion this way you will build config. something like this:
({
appDir: ".",
baseUrl: "js",
mainConfigFile: 'js/main.js',
paths: {
requireLib: 'libs/require/require-min',
jqm: 'libs/jqueryMobile/jquery.mobile-1.3.0.min',
config : 'config/conf'
},
modules: [
{
name: "main",
exclude : [
'config'
]
}
],
optimize: "none"
})