Haxe -> Javascript target for CommonJs (NodeJs) style output - javascript

Haxe's JavaScript exports everything in a Haxe compilation into a single output file. This is great for building applications. For a general purpose library, however, it would be nice if it output a *.js file per *.hx file within my compiled sources.
The intent of this is so that I can create a NodeJs module where the consumer of the library only needs to require() the particular files that they would like to use. Is this currently possible using the Haxe compiler on its own, or via an external tool?

There is the hxgenjs library that can generate one js file per haxe class/enum.
https://github.com/kevinresol/hxgenjs

I see 2 different questions here
How to output Haxe module as a NodeJS module?
How to build each JS file into separated output file?
As for #1 there is #:expose directive and it should help.
As for #2 you can use --each and --next in your build *.hxml file. This way you can specify several targets at once(and they will be built at once too). Unfortunately there is no way to use the mask so you will have to list all your entry points(modules' roots) manually.

Related

Can I use a TS library into a JS project?

One of my clients write Javascript code and I need to provide him a library.
I was wondering if I could write my library in Typescript and if he would be able to use it in JS ?
I cannot find a clear answer.
And if it's possible, will the JS api be the same as the TS one ?
Thanks
If you want to create a library for your client in Typescript and want your client to use it in his JavaScript code base then there is no need to worry about it.
Typescript is used for development purposes only. When you create a build, it generates JavaScript code. So, you can develop the library in Typescript and provide your client with the build so that he can import and use.
You can supply the JavaScript output of your TypeScript code and it can be used from other JavaScript files.
The API shouldn't be impacted by the transpilation.
TypeScript that is packaged for distribution (i.e. NPM) should be supplied as a .js file and an accompanying .d.ts type definition, rather than as a .ts source file as it makes it available to plain JavaScript applications.

Keep Flow types post webpack build

I want to add Flow to my current project I am working on. Everything works really great. However, I couldn't find a way of someway keep the types post build. I am using a monorepo structure and I have a lot of NPM modules. I would like to get an error if a module changes it's interface or it's exported functions/classes/types changes.
Any ideas/guidance is highly welcomed!
Thanks!
Webpack bundles JS files into a single output file, it has no way do preserve Flow types in the output bundle.
If you want to preserve Flow logic for use alongside this bundle, the current best practice would be to include your original sourcecode as .js.flow files. This blog post elaborates on this approach, but the short version is, you'd use flow-copy-source to output a bunch of .js.flow files that match your original source code.
If you insist on others including your compiled bundle instead of the source files, you'll need to include a .js.flow file that provides all of the external type interfaces. Here's the interface file for Immutable.js as an example.
Unless your library has some sort of build complexity that requires the distribution of its compiled assets, I would just rely on the consumers of your lib to compile and strip types on their own.

Can Webstorm automatically include project js files in html, or merge them into one?

I am using Webstorm a start a angularjs project. I've created a lot of *.js files. I have the include them using the tag one by one in the html files. whenever I created a new js file, I have to create the script tag.
The things I needed is just like gulp-concat, but without minifying. minified code are hard to debug.
Can anyone help on this? Thanks!
WebStorm doesn't have any built-in functions for combining files... But there are plenty of different tools on the web - plus you can create your own batch files for this.
I can suggest using Grunt grunt-contrib-concat task (https://github.com/gruntjs/grunt-contrib-concat). It supports merging files. You can run the task using Node.js run configuration, or configure it as a file watcher, or use Grunt console.
Browserify (http://browserify.org/) is one more way to go - it allows using commonjs-style syntax when developing front-end applications, combining the files into a single file for production
Or, try Webpack (https://webpack.github.io/) - it's a modern powerful module bundler

How do you separate javascript files for development?

I wanted to create a javascript code library that will be eventually merged into one single minified code file. I was trying to search on how to be able to have these code files separated for development, but I could only find how to have a javascript file add a different javascript file to an existing html page. How do you separate javascript files for development only?
Develop each module of your library as separate .js files then setup a task running tool such as Grunt. You will need node.js along with npm to install Grunt.
You can then use the grunt-contrib-concat plugin to concatenate your javascript files together, and minify it using grunt-contrib-uglify.
These files are separately developed and combined into a single file generally known as minification and bundling, you could use asset compressor in Ruby on Rails in case you are developing in Ruby, otherwise pure javascript development uses Grunt based system, check UglifyJS.

What is the best practice to consolidate multiple Javascript files?

For CSS, I can use SASS to import one CSS file to another and produce only single CSS file. What is the similar method for Javascript files?
You might want to check out Closure Compiler (which is a Google product).
You would probably want the Closure Compiler Application form of the product.
A sample workflow would probably look like:
Create a list of your JS files and paths
Run the command to compile and concatenate files (java --jar compiler.js --js path_to_file1.js --js path_to_file2.js (etc.) compiled.js)
Closure Compiler also has a related project, Closure Stylesheets, that does the same thing for stylesheets.
This approach, of course means that there's a pre-compilation step. Depending on your backend, there also exist libraries that do the compilation when the page is built. For example, for JSP, there's Granule a tag library that creates the compiled JS and CSS files at page build.
There's a third possibility: modularization. Since you gave the example of being able to import CSS files in SASS, an analogue for JavaScript is using a module library, using either the CommonJS standard, or (the one I prefer), the AMD (asynchronous module definition) pattern, which I have personally used with RequireJS. RequireJS also comes with a nice optimizing tool that will bundle up (minify, compress, concat etc) all the required files for your application
UPDATE
Since you mentioned that you are using Django in the comments (might be useful to update the question with this info too), see if this answer helps too
You could use minify which allows you to minify and combine javascript files. It also works with CSS.

Categories

Resources