Develop Reference

Not able to remove duplicate (dependent) entries while doing code split using webpack

I am using webpack 5.12.3 for bundle split.
He is my webpack.config.js
const { resolve } = require('path')
const webpack = require('webpack')
const TerserPlugin = require('terser-webpack-plugin')
const ProgressBarPlugin = require('progress-bar-webpack-plugin')
const { getIfUtils, removeEmpty } = require('webpack-config-utils')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const CompressionPlugin = require("compression-webpack-plugin");
module.exports = env => {
const { ifProduction, ifNotProduction } = getIfUtils(env)
const mode = ifProduction('production', 'development')
return {
mode,
//context: resolve('./src/public/js'),
entry: {
index: './.dist/public/main.js',
},
output: {
filename: '[name].min.js',
chunkFilename: '[name].min.js',
path: resolve('./src/public/js/'),
pathinfo: true,
},
}
remaining code contains rules,optimzations,minimizers etc.
Here is main.js which is used in webpack config entry
import 'babel-polyfill';
var Routes = require('../routes/react.jsx');
var Client = require('react-engine/lib/client');
// Include all view files. Browerify doesn't do
// this automatically as it can only operate on
// static require statements.
// Not required as part for webpack.
//require('./views/**/*.jsx', {glob: true});
// boot options
var options = {
routes: Routes,
// supply a function that can be called
// to resolve the file that was rendered.
viewResolver: function viewResolver(viewName) {
return require('./views/' + viewName);
}
};
document.addEventListener('DOMContentLoaded', function onLoad() {
console.log(typeof(options));
console.log(options);
Client.boot(options);
});
Here for all pages in application this code is getting executed only one bundle file is created. My aim is to have separate bundle for every page in /src/views . I did try to get viewName from viewResolver its not getting executed . Can anyone please suggest me how should I change code so that I can have entry for every page (that is possible using entry section of webpack config) but as everything is coming to main.js . If I try to add another main1.js what should be its code and how execution should come there ?

Building an Nx lib with Rollup does not bundle required dependencies

Question
I'm using the default Rollup executor to build an Nx library that I will later run in a browser-like environment. The resulting bundle cannot contain imports or requires. Running nx run ssr-bundle:build should create a single bundle containing both my application code and dependencies.
How can I bundle all of my code so my imported code is in the same file?
Example
The source file index.ts
import { isBoolean } from 'lodash';
async function handler() {
return new Promise((resolve) => {
setTimeout(() => {
resolve(isBoolean);
}, 1000);
});
}
export default handler;
The output file index.cjs.js
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var lodash = require('lodash'); <--------- this should be the lodash source code
async function handler() {
return new Promise((resolve) => {
setTimeout(() => {
resolve(lodash.isBoolean);
}, 1000);
});
}
exports["default"] = handler;

Why is gulp throwing "Did you forget to signal async completion?"

I have the following gulp file that was working fine for months until this morning:
//gulpfile.js
const gulp = require('gulp')
const { series } = require('gulp')
const rename = require('gulp-rename')
const uglify = require('gulp-uglify')
const sass = require('gulp-sass')(require('sass'))
function minJs() {
return gulp
.src('./dev/js/script.js')
.pipe(uglify())
.pipe(
rename({
extname: '.min.js'
})
)
.pipe(gulp.dest('./build/js/'))
}
exports.minJs = minJs
function minCss() {
return gulp
.src('./dev/css/style.sass')
.pipe(sass({ outputStyle: 'compressed' }).on('error', sass.logError))
.pipe(
rename({
extname: '.min.css'
})
)
.pipe(gulp.dest('./build/css/'))
}
exports.minCss = minCss
exports.test = () => {
series(minCss, minJs)
}
Every time I run "Gulp test" I get the following error:
[11:17:59] Starting 'test'...
[11:17:59] The following tasks did not complete: test
[11:17:59] Did you forget to signal async completion?
I've tried adding a callback to the two tasks and tried changing them to async functions but neither resolved the issue. I'm not sure why I'm getting this error since I am returning a stream.
Any help is appreciated!

gulp.series is actually a higher-order rule, i.e., it makes a rule out of rules, so shouldn't be wrapped in a closure:
exports.test = series(minCss, minJs);

Using Gulp to create browser friendly js file, including imports

Isomorphic React
I would like to transpile my react components server side into one bundle.min.js file. The issue I am having is that the file doesn't resolve import statements.
This is the file I would like to transpile (client/component.js)
import React from 'react';
import ReactDom from 'react-dom';
import App from './components/app';
ReactDom.render(<App />, document.getElementById('app'));
The result is this (bundle.min.js)
'use strict';
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _reactDom = require('react-dom');
var _reactDom2 = _interopRequireDefault(_reactDom);
var _app = require('./components/app');
var _app2 = _interopRequireDefault(_app);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
_reactDom2.default.render(_react2.default.createElement(_app2.default, null), document.getElementById('app'));
But this is not what I want.
Files I require
I need all the import statements removed and replaced with the actual files that I need. In my case I require
some files from node modules
some component files
Gulp function so far
// builds the components and clientside
gulp.task('buildComponentsClient', () =>
gulp.src(['./client/*.js'])
.pipe(include()).on('error', console.log)
.pipe(babel({ presets: ['es2015', 'react']}))
.pipe(concat('bundle.js'))
// .pipe(uglify({mangle: false}))
.pipe(rename('bundle.min.js'))
.pipe(gulp.dest('./public'))
);
Question
How do i create a browser friendly file with all dependencies that are specified in these minimalistic react element files?

From what I understand you wan't to use browserify coupled with babelify. Here is my gulp task for this:
import gulp from 'gulp';
import glob from 'glob';
import browserify from 'browserify';
import babelify from 'babelify';
import rename from 'gulp-rename';
import source from 'vinyl-source-stream';
import es from 'event-stream';
import uglify from 'gulp-uglify';
import buffer from 'vinyl-buffer';
const path = './client/';
const files = '*.js';
const bundles = [path + files]; // I use an array to be able to bundle
// multiple paths within the same task
gulp.task('bundle', () => {
let bundleAll = bundles.map(bundle);
return Promise.all(bundleAll); // Task ends when all bundles are done
});
// Bundle files found in bundlePath, returns a Promise resolved
// when all files have been processed
function bundle(bundlePath) {
return new Promise((resolve, reject) => {
glob(bundlePath, (err, files) => { // Create glob from path
var tasks = files.map(file => { // loop through each file
return browserify(file) // pass it to browserify
.transform(babelify, ["es2015", "react"]) // using babelify (browserify + babel)
.bundle() // ..profit!
.on('error', err => {
console.error('err', err.toString());
reject(err);
})
.pipe(source(file)) // this is required for browserify output to be use as a gulp stream
.pipe(buffer()) // needed by gulp-uglify
.pipe(uglify())
.pipe(rename({ 'bundle.min.js' }))
.pipe(gulp.dest('./public'));
});
es.merge(tasks).on('end', resolve); // When all files have been processed, resolve the promise we returned
});
});
}

gulp-install not install the dependencies with vinyl file

I'm a beginner of gulp plugin. I want install dependencies by merged package.json. The code as follow.
gulp.task('install-dependencies', function () {
var through = require('through2');
var npm = require('npm');
var Promise = require('bluebird');
var file = require('gulp-file');
var install = require('gulp-install');
var path = require('path');
var npmLoad = Promise.promisify(npm.load);
var plugins = {};
//for test
var lastFile;
gulp.src([`${PATH.plugin}**/package.json`])
.pipe(through.obj(function parse_plugins(file, enc, cb) {
if (file.isNull()) {
cb();
return;
}
if (file.isStream()) {
this.emit('error', new gulpUtil.PluginError('package-concat', 'Streaming not supported'));
cb();
return;
}
let fileContent = {};
try {
fileContent = JSON.parse(file.contents.toString())
} catch (e) {
this.emit('error', new gulpUtil.PluginError('package-concat', `file '${file.path}' not a json file!`));
throw e;
}
plugins = Object.assign({}, plugins, fileContent.dependencies)
lastFile = file;
cb();
},
function install(cb){
let fileContent = {};
fileContent.name = "test";
fileContent.dependencies = plugins;
var file = new gulpUtil.File({
base: path.join(__dirname, './'),
cwd: __dirname,
path: path.join(__dirname, './package.json'),
contents: new Buffer(JSON.stringify(fileContent))
});
this.push(file);
cb();
}
))
.pipe(install());
})
But, The dependencies not install as expected. And the log as follow.
[14:50:37] Starting 'install-dependencies'...
[14:50:37] Finished 'install-dependencies' after 205 ms
npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: fsevents#1.0.11

What is your operating system ?
You might find something similar here.
Sounds like you can try to uninstall everything and start again from scratch (or just delete your node_module folder and use npm install). Not sure though, depends a lot on your operating system according to the error itself.