We Keep Coding

Parcel creates a new hashed file after updating a dynamically imported module

I'm using the verion 2.7 of Parcel for bundling my client side javascript. I have a index.ts where I group all my code. In some cases I have to use dynamic import statements:
example:
const { Menu } = await import('./Menu');
The issue that I can't solve: after each update on Menu.ts, Parcel creates a newly hashed Menu.[hash].js file instead of updating it.
npm run watch:js:
"watch:js": "parcel watch --no-hmr ./public/ts/index.ts --dist-dir ./public/js --public-url ./"
public folder structure:
.
└── public/
├── [...]
├── js/
│ ├── index.js
│ ├── index.js.map
│ ├── Menu.[hash-1].ts **! that's an issue !**
│ └── Menu.[hash-2].ts **! that's an issue !**
└── ts/
├── [...]
├── index.ts
└── Menu.ts

How to exclude js file from src directory in webpack config file?

I'm writing react application with given structure (simplified):
src/
├── containers/
│ ├── ...
│ ├── ...
│ ├── ...
│ └── ...
├── SourceResolver/
│ └── SourceResolver.js
│
└── App.js
SourceResolver.js is a class which contains one method. This method is used in files which are localized into containers folder. I simply create object of this class and then call defined method:
new SourceResolver().getSource();
I don't want to minify this file (or even directory). I want to leave this file like it is in production build (as separte file). Leter if someone would like to change this method it will be possible even in production build.
How can achieve this? I tried to exlude this file/directory in webpack file, but with no success. Is it even possible?
Here is my webpack file https://pastebin.com/xS6QkKzb
Here is my changed webpack file, I tried to add exclude everyhere because I don't know why it doesn't work. https://pastebin.com/6brcNRq3

Benefits of using bin files over .js in express-generator

If one wants to jump start a project in Node.js with express. one would use express-generator. After creating a new project your file tree will look like this
.
├── app.js
├── bin
│ └── www
├── package.json
├── public
│ ├── images
│ ├── javascripts
│ └── stylesheets
│ └── style.css
├── routes
│ ├── index.js
│ └── users.js
└── views
├── error.pug
├── index.pug
└── layout.pug
One thing that stood out for me is that to run the app you need to do node bin/www or a predefined shortcut npm run. My question is why would one use the www the way it is and not add a .js extension and remove #!/usr/bin/env node from the top of the file? Are there any benefits of doing it this way or is it a personal preference?

Let's look at the first line of the bin/www file:
#!/usr/bin/env node
This shebang tells the *nix operating system how to interpret the file if you try to run it as a program.
So this file can be started as a program. And in Linux traditionally executable files do not have an extension.

Including/excluding globs for gulp.src

I'm trying to setup a glob array for my javascript concat build task in gulp. The directory structure looks as follows:
├── about
│ └── about.js
├── assets
├── contact
├── core
│ ├── navbar
│ │ ├── navbar.js
│ │ └── navbar.test.js
│ ├── routing.js
│ ├── routing.test.js
│ ├── utils.js
│ └── utils.test.js
├── generated
│ ├── footer.js
│ ├── header.js
│ └── templates.js
├── home
├── app.js
└── config.js
The order of the files is important:
generated/header.js
app.js
any of the *.js files, except those here below
generated/templates.js
generated/footer.js
I've wildly tried all kinds of wildcards combination, but the globbing isn't strong with me.
var inputFiles = [
'generated/header.js',
'app.js',
'!(generated)**/*.js', // <=---- ???
'generated/templates.js',
'generated/footer.js',
'!**/*.test.js'
];
So how do I include all *.js files except those from a subdirectory?
Thanks.

The best I came up with:
var gulp = require('gulp');
var tap = require('gulp-tap');
gulp.task('default', function() {
return gulp.src([
'generated/header.js',
'app.js',
'*.js',
'./!(generated)/**/*.js', // <- All subdirs except 'generated'
'generated/{templates,footer}.js',
'!**/*.test.js',
'!node_modules/**'
]).pipe(tap(function(file) {
console.log(file.path);
}));
});
Running it:
∴ glob-test gulp
[20:07:51] Using gulpfile ~/Desktop/glob-test/gulpfile.js
[20:07:51] Starting 'default'...
/Users/heikki/Desktop/glob-test/generated/header.js
/Users/heikki/Desktop/glob-test/app.js
/Users/heikki/Desktop/glob-test/config.js
/Users/heikki/Desktop/glob-test/gulpfile.js
/Users/heikki/Desktop/glob-test/about/about.js
/Users/heikki/Desktop/glob-test/core/routing.js
/Users/heikki/Desktop/glob-test/core/utils.js
/Users/heikki/Desktop/glob-test/core/navbar/navbar.js
/Users/heikki/Desktop/glob-test/generated/templates.js
/Users/heikki/Desktop/glob-test/generated/footer.js
[20:07:51] Finished 'default' after 326 ms
The main trick is avoiding the "!" character at the beginning of glob when including files.
https://github.com/isaacs/minimatch#comparisons-to-other-fnmatchglob-implementations
"If the pattern starts with a ! character, then it is negated."
ps. Placement of the negated globs doesn't matter. They are always moved to the end behind the scenes.

Using Grunt and Uglify to version control

I have a bunch of modules described in the following document tree:
.
├── Gruntfile.js
├── build
└── src
└── app
├── Render
│   ├── api
│   │   ├── common.js
│   │   ├── v1.js
│   │   └── v2.js
│   └── module.json
└── User
├── api
│   ├── common.js
│   ├── v1.js
│   └── v2.js
└── module.json
Where /src/app/Render/ and /src/app/User/ are both considered modules.
Inside the Gruntfile.js I wish to declare a list of included modules and default version like so:
var modules=["Render", "User"];
var version = 2;
Using this information I would like to traverse each of the modules folders, and uglify to package files in ./api/ including anything that matches the regular expression /^v[version]\./ (version refers to the variable and not a string literal) and omitting anything that matches the regular expression /^v(?!version\.)[0-9]+\./, then uglify them and store the file in /build/app/{{Module}}/api.js.
For example if version=2 is given I would like to end up with the following structure:
...
├── build
│ └── app
│ ├── Render
... │   └── api.js // /src/app/Render/api/v2.js + /src/app/Render/api/common.js
│  
└── User
└── api.js // /src/app/User/api/v2.js + /src/app/User/api/common.js
I will allow the user to run the task with a shell flag like so: grunt deploy --v=2 which would override the explicit var version = 2;
The issue is I do not get how to iterate over my array during a task and select the files I want (I've seen globbing but it doesn't seem advanced enough to select the files I want) and perform a separate uglify operation on each. I would really appreciate some advice.

One thing that people ignore so often is that you have the full power of Node.js in your Gruntfile.
var modules=["Render", "User"];
var version = grunt.option('version', 2);
var _ = require('underscore');
var fs = require('fs');
grunt.initConfig({
uglify: _.reduce(modules, function(obj, module){
obj[module] = {
files: {},
options: {
// Add your options here
}
};
obj[module].files['build/app/'+module+'/api.js'] =
_.chain(fs.readdirSync('./src/app/'+module+'/api'))
.filter(function(filename){
// Check against your regular expression here
})
.map(function(filename){
return './src/app/'+module+'/api/'+filename
})
.value();
return obj;
}, {});
})