Can TypeScript files be grouped into multiple outFiles? I want to bundle my Typescript code, but instead of one single JS file, I would like to organize my TS into separate JS files such as controllers.js and plugins.js. The options in the TypeScript project only allow for one outFile selection. Is there a way to achieve this?
Regrettably, the default TypeScript compiler behavior does not address this issue. I encountered this problem myself while attempting to modularize a TypeScript application.
My chosen solution for this problem is as follows:
var fs = require('fs');
// Constants
var PLUGIN_NAME = 'reference-parser';
// Plugin function for file processing
function referenceParser(fileName, prefix, filterParentReferences) {
var references = [];
var content = fs.readFileSync(fileName, 'utf8');
content = content.replace(/\/\/\/ <reference path=("|')/g, prefix);
content = content.replace(/.ts("|')\s*\/>,?/g, '.js');
function readLines(input) {
if (input.length === 0)
return;
var newLineIndex = input.indexOf('\r\n');
if (newLineIndex >= 0) {
var line = input.substring(0, newLineIndex).trim();
readLine(line);
if (input.length > (newLineIndex + 2))
readLines(input.substring(newLineIndex + 2));
} else {
readLine(input);
}
}
function readLine(line) {
if (line && line.length > 0) {
//console.log('Line: ' + line);
if (line.startsWith('//')) {
//console.log('Comment line, ignored.');
} else if (line.indexOf('_references.ts') >= 0) {
//console.log('External reference line, ignored.'); // TODO Support this?
} else if (filterParentReferences && line.startsWith('../')) {
//console.log('Parent reference, ignored.');
} else {
references.push(line);
}
}
}
readLines(content);
return references;
}
// Exporting the main plugin function
module.exports = referenceParser;b. Combine everything in a Gulp task:
//...
// Retrieve module source files by parsing the module's _references.ts file.
var sourceFiles = referenceParser(sourceRoot + '_references.ts', buildJsRoot, true);
// console.log(sourceFiles);
var sourcesStream = gulp
.src(sourceFiles)
.pipe(plugins.sourcemaps.init({ loadMaps: true })) // Load TypeScript generated source maps
.pipe(plugins.concat(module.name + '.Bundle.js'))
.pipe(plugins.uglify({ mangle: false })) // Minify the resulting bundle
.pipe(plugins.sourcemaps.write('.')) // Write the merged bundle source maps
.pipe(gulp.dest(destinationRoot));
moduleGulpStreams.add(sourcesStream); // Add the source stream to the stream merger
//...To make this happen, simply generate several tsconfig.json files. Afterwards, execute the compiler separately for each output file:
tsc -p /path/to/first/tsconfig.json --outFile controllers.js
tsc -p /path/to/second/tsconfig.json --outFile plugins.js
I've been pondering this issue all day. I have a button that should withdraw a student from a class, which is straightforward. However, it should also check the database for a waiting list for that class and enroll the next person if there is any. In ...
I recently built a basic Angular service and encountered an issue. @Injectable() export class someHandler { constructor( public anotherService: anotherService, ) {} ... The problem arises when I try to use this service in a component, as ...
I am attempting to automatically update an array within a Listview by utilizing ChangeDetectorRef in the following way: import { Component, OnInit, ChangeDetectionStrategy, Input, ChangeDetectorRef } from "@angular/core"; @Component({ selector: "regi ...
I've been encountering this issue where I keep getting an error message. I attempted to resolve it by setting "noImplicitAny": false in tsconfig.json, but unfortunately that did not work. As for the 'Property does not exist on type' error, I ...
Struggling to configure webpack and react with typescript without the complexity of CRA. The dev server isn't outputting files to index.html for viewing in the browser. I want to maintain a clean and simple structure, avoiding the multiple js scripts ...
When utilizing a backend and language detector, an issue arises: The localstorage contains the key I18nextLng with the value en-US. How can we set the default value to be I18nextLng with the value En? init and other settings are as per the default docume ...
I'm currently trying to create a private variable of type InnerItem, but I keep encountering the following error: Error: Cannot find name 'Queue'.ts(2304) private savedItems: Queue<InnerItem> = new Queue<InnerItem>(20); Could ...
I have a function that returns an array of JSX Elements. When I pass this to ReactDOM.render, I encounter the error mentioned above. wrappers.tsx const FooterWithStore:React.FC = () => ( <Provider store={store}> <FooterLangWrapper ...
Is there a way to create a button that can expand or collapse all tabs in an ant.design Collapse component? I attempted to modify defaultActiveKey but it seems like this can only be done during page rendering. If possible, could someone share a code snip ...
When working with observables, I often find myself using them like this: ... const id = 1337; this.service.getThing(id).subscribe( suc => doSomething(suc.name), err = doSomethingElse() ); Lately, I've been utilizing the async pipe more freque ...
Utilizing JavaScript files within our Cypress testing is a common practice. Within the commands.js file, I have developed a custom command: Cypress.Commands.add('selectDropdown', (dropdown) => { cy.get('#' + dropdown).click(); } ...
Trying my hand at crafting a TypeScript object from JavaScript. The specific JavaScript object I'm attempting to construct can be found here: https://cdnjs.cloudflare.com/ajax/libs/chess.js/0.10.2/chess.js In the provided JavaScript example, the obj ...
Why am I encountering the error message saying "Cannot find name 'object'"? The error message is: Error: core.service.ts (19,23): Cannot find name 'object'. This error occurs in the following line of code: userChange: Subject<ob ...
I recently started learning angular and I'm struggling to make this HTTP get request work. I have been looking at various examples of get requests for arrays and attempted to modify one for a single object (a user profile) but without success. The err ...
My goal is to intercept responses returning from the /api, catching them if they are a 401 error, executing a refresh session action, and then retrying the original HTTP call again (while also preventing it from infinitely looping if another 401 error occu ...
If I have an array like [["a", "b"], ["c", "d"]], is there a way to iterate, reduce, map, or join this array in order to get the desired output of ["ac", "ad", "bc", "bd"]? What if the array is structured as [["a", "b"], ["c", "d"], ["e", "f"]]; how can we ...
As a newcomer in Angular and Mean Stack, I need help implementing the canActivate() method to restrict admin routes. In my service file, the checkAdmin method returns an observable of type "User", but the canActivate method's return type is an observa ...
Encountering issues with an async function. In the ../lib folder, I have a class for handling data from an API website. However, when attempting to load the API data within an async function, I encounter difficulties. The async function does not return a ...
Struggling with formatting time formats received from a database? Looking to convert two types of data from the database into a visually appealing format on your page? For example, database value 400 should be displayed as 04:00 and 1830 as 18:30. Here&apo ...
I am currently following a React tutorial that demonstrates how to create a useForm hook for linking form input to state. Here is the implementation of the hook: const useForm = (initial = {}) => { const [inputs, setInputs] = useState(initial) ...