We Keep Coding

How to integrate es6 with gulp-develop-server

I am trying to transfer an old node-express project over to be able to use es6. I have seen many posts about using gulp with es6. Most of them discuss using a syntax like this:
const gulp = require("gulp");
const babel = require("gulp-babel");
gulp.src('./index.js')
.pipe(
babel({
presets: [
["#babel/env", { modules: false }],
],
})
)
However my existing project's gulpfile does't use gulp.src at all. Instead, it uses gulp-develop-server. The gulpfile looks like this:
const gulp = require("gulp");
const devServer = require("gulp-develop-server");
const spawn = require("child_process").spawn;
const fs = require("fs");
const basedir = ".";
function serverRestart(done) {
// perform some cleanup code here
devServer.restart();
done();
}
function serverStart() {
devServer.listen({
path: basedir + "/index.js",
});
}
function serverWatch() {
serverStart();
gulp.watch(
[
basedir + "/paths/**/*",
// more directories to watch
],
serverRestart
);
}
function reload(done) {
serverWatch();
done();
}
function defaultTask() {
let p;
gulp.watch(["gulpfile.js"], killProcess);
spawnChild();
function killProcess(e) {
if (p && !p.killed) {
devServer.kill();
p.kill("SIGINT");
spawnChild();
}
}
function spawnChild() {
p = spawn("gulp", ["reload"], { stdio: "inherit" });
}
}
process.stdin.resume();
process.on("exit", handleExit.bind(null, { cleanup: true }));
process.on("SIGINT", handleExit.bind(null, { exit: true }));
process.on("uncaughtException", handleExit.bind(null, { exit: true }));
function handleExit(options, err) {
// perform some cleanup code here
if (options.cleanup) {
devServer.kill();
}
if (err) {
console.log(err.stack);
}
if (options.exit) {
process.exit();
}
}
gulp.task("serverRestart", serverRestart);
gulp.task("serverStart", serverStart);
gulp.task("serverWatch", serverWatch);
gulp.task("reload", reload);
gulp.task("default", defaultTask);
The existing flow is important because it executes needed code for setup and cleanup every time I hit save, which runs serverRestart. I've been trying a few different methods based on the other questions which recommended using gulp.src().pipe(), but I havne't had much luck integrating it with the existing pattern which uses gulp-develop-server. I am trying to not have to rewrite the whole gulpfile. Is there a simple way to integrate babel with my existing gulpfile such that I can use es6 in my source code?

There's an example with CoffeeScript in the gulp-develop-server documentation.
Using that as a model, try this:
function serverStart() {
devServer.listen({
path: "./dist/index.js",
});
}
function serverWatch() {
serverStart();
gulp.watch(
[
basedir + "/paths/**/*",
],
serverRestart
);
}
function serverRestart() {
gulp.src('./index.js')
.pipe(
babel({
presets: [
["#babel/env", { modules: false }],
],
})
)
.pipe( gulp.dest( './dist' ) )
.pipe( devServer() );
}
Other suggestions
That being said, your existing Gulp file doesn't actually really use Gulp. That is, everything is defined as a function and it doesn't leverage any of Gulp's useful features, like managing task dependencies. This is because (pre-es6), this was a very simple project. The Gulp tasks in that file are an over-elaborate way to watch files and run a server. The same could be done (with less code) using nodemon.
With the introduction of React and more complicated build processes, Gulp seems to have fallen out of favor with the community (and in my personal experience, Gulp was a time sinkhole anyhow).
If the main change you want to make is to use import, you can simply use a more recent Node version. You'll surely run into the error SyntaxError: Cannot use import statement outside a module. Simply rename the file to .mjs and it will work. This provides a way to incrementally migrate files to import syntax. Other features should automatically work (and are all backwards-compatible, anyhow). Once your project is mostly, or all, compliant, you can add "type": "module" to your package.json file, then rename all of your require-style js files to .cjs, and rename all of your .mjs files to .js, or leave them as .mjs. Read more about the rules of mixing CommonJS and Module imports in the Node.js blog post (note that some things may have changed since that article was written).

Importing / bundling Bootstrap 5 or Popper.js with Gulp 4 generates LICENSE.js file?

I'm using Gulp 4 and Webpack 5 on a Bootstrap 5 project and when I bundle my scripts, Gulp generates a bundle.js (as expected) but it also generates a bundle.js.LICENSE.js file.
I can't see anything in my build task that would create that.
It only seems to be the case when I import 'bootstrap' or import Popper from 'popper.js/dist/umd/popper'.
Is there a way to disable the generation of that LICENSE file? I'm guessing there's something in the Bootstrap 5 js that's forcing Gulp or Webpack to create that file(?)
Any thoughts would be appreciated. Here's my build scripts task:
// Build Scripts Task
const buildScripts = (mode) => (done) => {
let streamMode;
if (mode === 'development') {
streamMode = require('./webpack/config.development.js');
} else if (mode === 'production') {
streamMode = require('./webpack/config.production.js');
} else {
streamMode = undefined;
}
['development', 'production'].includes(mode) ? pump([
gulp.src(srcPath('js')),
vinylNamed(),
webpackStream(streamMode, webpack),
gulpSourcemaps.init({ loadMaps: true }),
through2.obj(function (file, enc, cb) {
const isSourceMap = /\.map$/.test(file.path);
if (!isSourceMap) {
this.push(file);
}
cb();
}),
gulpBabel({
presets: ['#babel/preset-env'],
}),
...((mode === 'production') ? [gulpUglify()] : []),
gulpSourcemaps.write('./'),
gulp.dest(distPath('js')),
browserSync.stream(),
], done) : undefined;
};

The addon Webpack uses to optimize files is called Terser and has options to extract inline comments matching a certain pattern to an external file (which by default is that License pattern you are seeing).
https://webpack.js.org/plugins/terser-webpack-plugin/
module.exports = {
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
terserOptions: {
//...
extractComments: true
},
}),
],
},
}
By default extract only comments using /^**!|#preserve|#license|#cc_on/i regexp condition and remove remaining comments. If the original file is named foo.js, then the comments will be stored to foo.js.LICENSE.txt. The terserOptions.format.comments option specifies whether the comment will be preserved, i.e. it is possible to preserve some comments (e.g. annotations) while extracting others or even preserving comments that have been extracted.
Check in your config.production.js webpack file and see if those options are used in there. It does default to true though.

Add support for next-css and next-less simultaneously in next.config.js

I am using nextJs and need to add support for both less and css. I want to have next-css and next-less both for a project. But It accept one at a time. Here is what I am using
const withCSS = require('#zeit/next-css')
module.exports = withCSS({
/* config options here */
})
const withLess = require('#zeit/next-less')
module.exports = withLess({
cssModules: false,
lessLoaderOptions: {
javascriptEnabled: true
}
})
Am I including both loaders correctly? And I need javascriptEnabled: true too. How can we acchieve this configuration.
I really appreciate if you can give any hint or two.

This should work.
const withCSS = require('#zeit/next-css')
const withLess = require('#zeit/next-less')
module.exports = withCSS(withLess())

Analyze javascript file using Typescript Compiler

Refer to: https://github.com/Microsoft/TypeScript/wiki/Using-the-Compiler-API, I want to get type of node in AST.
It is successful for angular project because it is written using typescript and tsconfig.json exists.
When I try to analyze react app which is written using javascript
const program = ts.createProgram({
rootNames: [fileName],
options: {
strict: true,
target: ts.ScriptTarget.ES2015,
allowJs: true,
checkJs: true
}
})
const typeChecker = program.getTypeChecker();
... ...
I get: typechecker.getTypeAtLocation(node).getSymbol() is undefined.
I assume options of ts.createProgram is wrong.

the option: moduleResolution: ts.ModuleResolutionKind.NodeJs is key.
const program = ts.createProgram({
rootNames: [file1],
options: {
strict: true,
target: ts.ScriptTarget.ES2015,
allowJs: true,
checkJs: true,
moduleResolution: ts.ModuleResolutionKind.NodeJs
}
})
The above works for React JS.

Systemjs-Builder - Cannot configure properly - Bundling Typescript into a package

I want to build a quick nodejs script to package a Typescript app as SystemJS modules, a lot like what Angular2 bundles look like.
I tried different configurations but I can't seem to put my finger on it, and haven't found clear enough documentation as of yet.
Note that for this "test", I am not using Gulp or Jspm at all, just systemjs-builder for the time being (and don't plan on using jspm at all either)
Here's what my "project" looks like:
---- Project's Root
-------- index.ts // export * from './modules/index' and eventually more
-------- modules
------------ index.ts // export * from './menu/index'
------------ menu
---------------- menu.component.ts // export class
---------------- menu.service.ts // export class
I want to package this under a single file, where I will have multiple SystemRegister modules that can be consumed in an app thereafter
I tried the following without success:
var Builder = require('systemjs-builder');
// optional constructor options
// sets the baseURL and loads the configuration file
var builder = new Builder('./modules');
builder.bundle('./modules/index.ts', {
/* SystemJS Configuration Here */
baseURL: './modules',
transpiler: 'typescript',
typescriptOptions: {
"module": "system",
"emitDecoratorMetadata": true,
"experimentalDecorators": true
},
defaultExtension: 'ts',
packages: {
'modules': {
defaultExtension: 'ts'
}
}
}, 'infrastructure.js')
.then(function() {
console.log('Build complete');
})
.catch(function(err) {
console.error(err);
})
First of all, the defaultExtension options doesn't seem to work at all
So when I do import {something} from 'filePath'; (without extension), it tries to load filePath, instead of filePath.ts;
Second, if I try adding the .ts extension in my imports (which I don't want to do), it complains that the code is invalid (unexpected token #, unexpected token menuItem and so forth)
Anyone have a good example or some explanations on how this is supposed to work?
Thank you

here you have an example: angular typescript skeleton
build task looks like this:
const path = require('path');
const Builder = require('jspm').Builder;
const builder = new Builder();
const packageJson = require(path.join(config.projectDir, 'package.json'));
return beginBuild()
.then(buildSFX)
.catch((err) => console.log('Build Failed', err));
function beginBuild() {
builder.reset();
return builder.loadConfig(path.join(config.projectDir, packageJson.jspm.configFile))
}
function buildSFX() {
const appName = packageJson.name;
const distFileName = `${appName}.min.js`;
const outFile = path.join(config.distDir, distFileName);
const moduleName = 'app';
const buildConfig = {
format: 'global',
minify: true,
sourceMaps: true
};
return builder.buildStatic(moduleName, outFile, buildConfig);
}
and jspm conf looks like this:
System.config({
defaultJSExtensions: true,
transpiler: "typescript",
typescriptOptions: {
"tsconfig": "src/tsconfig.json"
},
paths: {
"github:*": "vendor/jspm_packages/github/*",
"npm:*": "vendor/jspm_packages/npm/*",
"app": "src/index"
}
/// ...
}

Why do you want to bundle typescript? Bundling is a method used for optimizing the delivery of source code to the browser. The browser doesn't know typescript, it only knows javascript (unless you do on the fly transpiling).