Develop Reference

Webpack 5 IgnorePlugin - Not ignoring JS file from output on CSS files only?

I am trying to use the Webpack's IngorePlugin. I am using my Webpack file only to create a CSS file. On build, it outputs a JS file. But I don't want that. Tried ignoring JS files but still outputs it.
new webpack.IgnorePlugin(/^\.\/js\/(?!admin)/),
Outputs in the ROOT folder. So I want to disable all JS files from the output in the root folder. "admin" is the file being created.
How can I do this?

To properly answer your question, it'd be helpful if you posted a link to the full WP config file and an example of the file that's being processed.
Also, you mentioned you're only using WP to create a CSS file, does that mean you're just trying to use something like SASS, Stylus, Less, etc? If so, you could probably just set up a package.json script to compile your CSS without WP.
For example, if you have a .scss file, you could install node-sass, and create a simple Node script to compile what file you pass in as an arg.
bin/
- build-css.js
src/
- styles.sass
Within build-css.js
#!/usr/bin/env node
const { basename, resolve } = require('path');
const sass = require('node-sass');
const [...files] = process.argv.slice(2);
if (files.length) {
files.forEach((relativeFilePath) => {
const fileName = basename(relativeFilePath, '.scss');
sass.render(
{
file: resolve(__dirname, relativeFilePath),
outFile: resolve(__dirname, `./public/css/${fileName}.css`),
},
(err, result) => { console.log(err); }
);
});
}
else {
console.log('No files were provided to process');
}
Within package.json
"scripts": {
"build:css": "node ./bin/build-css.js"
}
The above has the benefit of giving you the control of how your files are processed at a more granular level, and you're only locked in to any SCSS changes, instead of Webpack and SCSS.
If you're using WP for it's file watching capabilities, you could instead wire up chokidar to run the new script when you change files.

JS, Browserify: function not defined

I have files as represented:
-js/
- calc.js
- tool.js
-index.html
calc.js is a node module of following structure:
module.exports = {
calculate: function() {...},
getPrecision: function() {...}
}
and tool.js use require and adds some functions, like that:
const fpcalc = require('./fpcalc');
function changeState() {
//some code using fpcalc
}
I used Browserify to generate bundle.js and added that as script src.
One of my buttons on HTML page is using onclick=changeState(). After clicking I'm getting
ReferenceError: changeState is not defined
at HTMLAnchorElement.onclick
Why is that? Is there any other way to make it work?

The function "changeState" is not exported in your tool.js.
That means it is only visible inside your bundle.js, but not outside.
Have a look at this: https://makerlog.org/posts/creating-js-library-builds-with-browserify-and-other-npm-modules
It shows you how to expose your code to the global namespace in javascript.

Here's a very simple way to make it work like you want.
const fpcalc = require('./fpcalc');
window.changeState = () => {
//some code using fpcalc
}

I have same error, here is my working example.
mac, browserify https://github.com/perliedman/reproject
Must use sudo install globally
sudo npm install -g brwoserify
https://github.com/perliedman/reproject
sudo npm install reproject // install locally is fine
Must manually create 'dist' folder for later output file use
Must use --s expose global variable function 'reproject' and or 'toWgs84' you will use later in browser js.
Without --s , will get 'reproject' undefined error . https://makerlog.org/posts/creating-js-library-builds-with-browserify-and-other-npm-modules
browserify --help will list all options.
-o means output file directory
browserify node_modules/reproject/index.js --s reproject -o node_modules/reproject/dist/reproject.js
HTML script tag include your above dist/reproject.js
Now, you will not get 'reproejct' undefined error
return reproject(_geometry_, ___from_projection, proj4.WGS84, crss)

how to access parent module data in child file in node.js

my file are like avilabele this sturucture.
sample.js is root file and test.js is avilable in xx folder.
sample.js
var name={
h:14
}
module.exports=name;
test.js
var name=require('./sample.js')
console.log(name.h);
when a run test.js code using command prompt :
node test.js
it gives error like :
Cannot find module './sample.js'

When you require a file with a relative path, it is relative to the file doing the require (see here). In test.js, require('./sample.js') will look for /path/to/xx/sample.js. Use require('../sample.js') since it is in the parent folder of test.js.

var name=require('../sample.js')
console.log(name.h);
You are requiring module from the parent directory with ".."

What is the best way to set up an angularjs project with old javascript files, typescript and sourcemap?

I would like to use a bootstrap-template with js-files for my new angularjs project. New modules will be written in typescript.
So my idea was to transcipt all ts files into /build/js/
Then i would concat all js files from /app/**/*.js and from /build/**/*.js into app.js.
My project folder structure looks like this.
app
|-js-files
|-ts-files
build
|js folder with .js.map.files
|-app.js
|-app.js.map
|-vendor.js
On every step sourcemap files will be created.
There are my gulp tasks:
gulp.task('typescript', function () {
var tsResult = tsProject.src()
.pipe(sourcemaps.init()) // sourcemaps will be generated
.pipe(tsProject());
return tsResult.js
.pipe(sourcemaps.write('.')) // Now the sourcemaps are added to the .js file
.pipe(gulp.dest('./build/js'));
});
gulp.task('bundle', function () {
return es.merge(gulp.src(source.js.src), getTemplateStream())
.pipe(sourcemaps.init()) // sourcemaps will be generated
.pipe(concat('app.js'))
.pipe(sourcemaps.write('.')) // Now the sourcemaps are added to the .js file
.pipe(gulp.dest(destinations.js));
});
Is this the right way to set up a project like this?
Source mapping doesn't work...?
Should the folder /build/js be deleted after the bundling into app.js?

Is this the right way to set up a project like this
Personally no. Have all the files .js and .ts in the same folder ./src. Set allowJs:true and outDir:'./dist'. Then slowly start the .js -> .ts migration as needed.
More
As an example checkout this quick video : https://www.youtube.com/watch?v=gmKXXI_ck7w

copying files with gulp

I have an app. My app source code is structured like this:
./
gulpfile.js
src
img
bg.png
logo.png
data
list.json
favicon.ico
web.config
index.html
deploy
I am trying to use Gulp to copy two files: ./img/bg.png and ./data/list.json. I want to copy these two files to the root of the deploy directory. In other words, the result of the task should have:
./
deploy
imgs
bg.png
data
list.json
How do I write a Gulp task to do this type of copying? The thing that is confusing me is the fact that I want my task to copy two seperate files instead of files that fit a pattern. I know if I had a pattern, I could do this:
var copy = require('gulp-copy');
gulp.task('copy-resources', function() {
return gulp.src('./src/img/*.png')
.pipe(gulp.dest('./deploy'))
;
});
Yet, I'm still not sure how to do this with two seperate files.
Thanks

You can create separate tasks for each target directory, and then combine them using a general "copy-resources" task.
gulp.task('copy-img', function() {
return gulp.src('./src/img/*.png')
.pipe(gulp.dest('./deploy/imgs'));
});
gulp.task('copy-data', function() {
return gulp.src('./src/data/*.json')
.pipe(gulp.dest('./deploy/data'));
});
gulp.task('copy-resources', ['copy-img', 'copy-data']);

You could also use merge-stream
Install dependency:
npm i -D merge-stream
Load the depedency in your gulp file and use it:
const merge = require("merge-stream");
gulp.task('copy-resources', function() {
return merge([
gulp.src('./src/img/*.png').pipe(gulp.dest('./deploy/imgs')),
gulp.src('./src/data/*.json').pipe(gulp.dest('./deploy/data'))
]);
});