I'm trying to make use of a Haxe library in Javascript. Since I already have a project written in Javascript, porting that to Haxe + using the given Haxe library isn't really a solution I'm ready to take at the moment.
Is there a way I can just compile the library from it's Haxe source folder to a JS file that I can then include in my <script> tags and refer to in my project? If I'm not mistaking, when a Haxe project normally compiles, it only includes the classes actually used in your project (correct?) - therefore I need some kind of tool or compiler options that will include all the classes in a given directory.
I would assume packages will get namespaced into Javascript objects at that point.
In case this helps, the library I'm looking to transcompile is Nape (Physics engine written in Haxe).
Looks like I found a way!
From FlashDevelop, create a new Haxe project (for JS).
Then, add a reference to the library that you wish to compile, either by:
Finding it in your Haxe install directory/haxe/lib/name_of_library/version_of_library.
Or, simply by adding the library name in your project settings, under Libraries (as shown in the picture below).
Third (most important step), add --macro include('your_library_root_packagename') in the Additional Compiler Options (replace with your library's top-level package name, obviously!)
I believe that if you have a library consisting of many top-level packages, you would need to enumerate several of those --macro compiler options. In my case I just needed the one.
Finally, CTRL+ENTER... wait for it to transcompile and Voila!
You have a Library in Javascript format!
Related
So I've started using VsCode over Atom recently and love it, the issue is I develop for software that uses its own JS API with no proper integration into anything.
I've started trying to implement my own autocomplete/intellisense structure using their pdf into VsCode to speed up my workflow, currently I'm simply using a JS file that is full of empty functions and objects with a bunch of JSDoc comments to help VsCode Intellisense identify what's what, that seems to be working fine so far but it means importing this "useless" file into every project I work on.
I looked into extending the JS language using a language server but that seems way too complex for what I need (plus it looks like I'd be building the entire Javascript language from scratch).
Does anyone have any recommendations ect?
Kind regards.
Edit
Sorry I also would like the ability for it to pass linting as right now it gets a bit funky with it.
You likely do not need an extension for that your example use case.
VS Code's intellisense for libraries is powered by .d.ts typing declaration files. The declaration files for the library you are using can either be written in your current workspace as you are currently doing, or—preferably—shipped with the library itself. Many npm modules ship their with typing definitions files, while other libraries have typing definition files provided by the community through DefinitelyTyped.
You alternatively bundle d.ts types file into as a separate npm package that you include in any project that needs them
This is vague - I apologize in advance, I am trying to be as succinct as I can with my limited understanding, while exposing my potentially incorrect assumptions.
I have a website that's literally one huge HTML file. It runs scripts defined in-line in a <scripts> tag.
My goal is to move all the scripts into individual .js files and pull them into index.html (or into one another where required). I am familiar with the usage of Node's require and I am familiar with import, as used in Angular. I stress usage because I don't really know how they work.
Assumption 1: I cannot use require - it is purely for Node.js. The reason I bring it up is that I am pretty sure I have seen require in AngularJS 1.5 code, so assuming makes me uncomfortable. I am guessing this was stitched together by WebPack, Gulp, or similar.
Assumption 2: I should use import, but import only works with a URL address, if I have my .js hosted on a server or CDN, it will be be pulled. BUT, I cannot give local pathing (on the server) here - index.html will NOT automatically pull in the dependencies while being served. I need npm/Webpack/other to pre-compile my index.html if I want the deps pulled in on the server.
Assumption 3: Pre-compiling into a single, ready-to-go, html file is the desired way to build things, because the file can be served quickly (assuming it's ready to go). I make the assumption with the recent trend of serving Markdown from CDNs, the appearance of the JAMstack, and the number of sites using Jekyll and such (though admittedly for traditional Jekyll sites).
Assumption 4: I also want to go to Typescript eventually, but I assume that changes nothing, since I will just pull in TS to compile it down to .js and then use whatever solution I used above
Question: If it's clear what I am trying to do and what confuses me, is a decent solution to look into npm/Webpack to stich together my .js files? What would prepare them for being stiched together, using import/export? If so, is there an example of how this is usually done?
As you mentioned, require cannot be used for your purposes, since it is a part of CommonJS and NodeJS's module system. More info on require can be found here: What is this Javascript "require"?
Import is a ES2015 standard JS syntax. But ES2015 standard and everything above it has very limited browser support. You can read more about it here: Import Reference
However, you can still code in the latest standard (thereby enabling the use of import/export etc.,) and then transpile the code to be able to run on the browser. Inorder to do this, you require a transpiler. You can refer Babel which is one of the most popular transpilers : https://babeljs.io/
For your exact purpose, you need to use a module bundler. Webpack/Rollup etc., are some popular module bundlers. They can automatically identify all the JS files referenced through import, combine them and then transpile code to be able to run on the browser (they also use a transpiler) and produce a single JS file (or multiple, based on your configurations).
You can refer the getting started guides of Webpack: https://webpack.js.org/guides/getting-started/
or RollupJS: https://rollupjs.org/guide/en#quick-start
So at my job I need to write a lot JSFL scripts. And because of the way JSFL, the scripts tend to be gigantic files, with functions and spaghetti everywhere.
So I had an idea to write them in Typescript, using separate files as "modules" (like I'm used to for commonjs/es6). And compile that all down to a single file.
I've tried searching but I've been unable to come up with an answer. Since JSFL just expects a simple javascript file. I obviously can't use commonjs, amd, etc.
So is there a way, that when developing. I can write separate "modules", have typescript (or if needed webpack) compile them into a single javascript file? Just like copy the functions from each file, and place it into one big file.
I'm not sure if its possible with typescript, or if I'll have to use some script or something to extract all the functions out.
Also since Adobe's JSFL is using an ancient javascript engine, it doesn't support a lot of features, and I will be adding polyfills to fill those holes.
You can use the typescript compiler option --outfile
Concatenate and emit output to single file. The order of concatenation
is determined by the list of files passed to the compiler on the
command line along with triple-slash references and imports. See
output file order documentation for more details.
See also documentation.
I've recently created a JavaScript library using Google's Closure Compiler: https://github.com/bvaughn/task-runner
I intend for this library to be used by applications that also require the full Closure Library, and so I want the built version of my library (Task Runner) not to include a subset of Closure Library. If Task Runner includes a subset of Closure Library, and another application includes the full Closure Library, a race condition will exist between which loads Closure last (last in wins). It also bloats the size of the Task Runner file.
However I'm having trouble. If I don't require any of the Closure library classes, Task Runner builds fine (obviously). However if I require something (goog.dom for instance) then my "compiled" JavaScript file also includes a portion of the Closure library. Is there a way to tell the Closure Compiler to leave certain JavaScript files/modules/whatever out of the built result?
FWIW, the Plovr experimental-exclude-closure-library option seems to somewhat describe the functionality I'm looking for.
On the surface what you are asking makes no sense. You want to depend on/use code from Closure-library, but not include it in your output. This isn't really possible nor how the library and compiler function together.
There is a rather small list of primitive functions defined in Closure-library that are completely removed/replaced when compiled with Closure-compiler. goog.require and goog.provide are the two most prominent of those.
For the vast majority of the Closure-Library, if you use or depend on a class, method or object that specific code will appear in the compiled output. And because that library code itself may depend on other parts of the library, even more code may be included in the compiled result.
The difference between using Closure-compiler with Closure-library as compared to more traditional JavaScript libraries is that ONLY the parts of the code determined to be called and used are included in the output. This is much more granular than a simple file inclusion - prototypes, variables, constants, etc will all be excluded because the compiler can determine that they are never used.
Distributing a Library
If you are building a library which depends on Closure-library, you have two options.
Distribute a compiled/built version
You would compile your library using Closure-library; exporting any public API methods and properties. Others who utilize your library with Closure-compiler or Closure-library will need to use an externs file and include your library AFTER compilation.
Distribute your library as source
You would simply distribute your library source code. Others would goog.require your library as part of their source and build process. If Closure-library is used in both projects, it will only be included once in the build process.
There is no hybrid approach where you compile your code but exclude Closure-library. This violates the principle that all of the source code will be compiled simultaneously.
You can peruse my Geolocation-marker library to see an example. I provide a compiled standalone version of the code for use, but the uncompiled source can also be included in other projects which use Closure-library.
I wrote my first library in dart. Now I want to make use of it in a website. My idea was to compile all necessary dart code of my lib and its dependencies into one javascript file that has a useful "global" API. As I understand this I would also write this API in dart and compile it altogether to javascript but I fail to see how this is done. The https://www.dartlang.org/tools/dart2js/ wasn't particular helpful to me.
To give a simplified example: The library is a generic parser controlled by a grammar. A parse-tree is build from some input file and a grammar. Think of it like:
ParseTree parse(File input, File grammar);
So in the resulting javascript I want to have this available in some form so one could write e.g.
var tree = MyParserLib.parse("path/to/input.file", "my.gramamar.file");
Usually you build your entire app at once. Building distinct parts or libraries to JS and using the output in another app is not (yet?) well supported.