I have a node.js folder which contains a main js file and several other js files which contain the functions that the main js file will import.
I have minified all the js files in this folder.
In the original main.js file, it calls another module with the following line;
var func= require('./func');
After minification, this line remains the same. However, func.js is changed to func.min.js after minification. Do I have to modify the minified file manually to have it import func.min.js this way?
var func= require('./func.min');
It is quite tedious to manually make changes to the minified file. What is the most efficient way to minify my js files and get the main.min.js working?
I am using Webstorm file watchers to minify the js files.
To get your main.js working, change the require line in main.js to;
var func= require('./func.min');
This will work because you are using Webstorm file watchers to minify the js files. Therefore, when func.js is changed, func.min.js will be automatically generated.
Related
Please see this image. I see a constants.js file and "js.map" file under the constants.ts file. while I see no js file for other ts files. I understand that the type script compiler will generate the js file for each ts file. I am not sure why I can not see all the js files. I am not sure which configuration setting is affecting this. project is under source control. I only want to commit to the .ts files. I need to stop any ".js" or "js.map" files from being generated. not sure why it is only happening for one file. This is .Net core project with angular frontend.
I have a very old AngularJS project which is quite big. Instead of creating a bundled .js file composed of all the required code, this project is organized in the following way:
All the .js files are directly loaded in index.html with a <script src="path/to/js">
Even the dependencies minified .js files are loaded in the same way, examples:
<script src="bower_components/angular-route/angular-route.min.js"></script>
<script src="bower_components/angular-resource/angular-resource.min.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.min.js"></script>
The code makes vast use of definitions (functions, classes, enums and so on) declared in different .js files without importing them (because they are all available globally). Examples:
// inside one file, PastFuture is not declared here
if (self.pastFuture === PastFuture.FUTURE) {
... // do something
}
// inside another file, it is not exported or anything, it is just defined
const PastFuture = {
PAST: 'PAST',
FUTURE: 'FUTURE'
};
I want to migrate this project into something a bit more "standard". I've removed bower for npm dependencies but now I'm stuck at forcing all these .js files to get bundled together.
The major problem of the code is that once bundled with browserify, all the definitions not imported stops working, for example, PastFuture is not defined unless I import it manually wherever is required.
Is there a way to overcame / solve this problem without adding exports and require in all the files of the project?
I was thinking that if I concatenate all those .js files instead of trying to make them require each other, it would have the safe effect without the need to add exports and imports.. but as a solution, it just sounds like a hack to me and I was searching for something more correct.
I had a file, module.ts written in TypeScript and compiled it to JavaScript for production deployment. What was I left with were the following files;
module.js (the TypeScript code compiled into JavaScript)
module.d.ts (the declaration file)
module.js.map (the source file)
Now I want to revert the module.js back to module.ts file using all these 3 files because I don't have that .ts file anymore.
I tried loading module.js inside the browser, hoping it should load it's .ts file into the Developer Tools, using the Sourcemap, but it doesn't. I believe I am missing the point here of having a Sourcemap after all.
I'm using Webpack with Storybook and need to include a JavaScript library file in an HTML file via a script tag. Unfortunately, I get a 404 error indicating that the file was not found (the file's path is based on my local filesystem and is correct). How do I inform Webpack regarding where to look for my library or "static" files?
Add files in entry object in webpack.config.js
entryPoint = {
app: ['path/to/script', 'path/to/script2','./index.js'],
};
This will make sure that you have the library loaded when you have run index.js (entry point of project).
More on Webpack entry points.
We recently created a Repository for a TypeScript project. We try to .ignore all generated files to keep our repository and build processes clean.
Currently our TypeScript files someFile.ts are compiled to JavaScript files someFile.js. We would like to ignore all compiled files. However, there are javascript files which we would like to track in our repository. This makes it impossible to simply ignore all src/**/*.js files.
Is there a way to add a prefix or postfix or other naming adjustment to the compiled javascript files as a compileOption? Something like file.compiled.js?
From the docs: http://www.typescriptlang.org/docs/handbook/compiler-options.html
You could use --listEmittedFiles and save the list of compiled files to .gitignore