What does Webpack compiles JavaScript modules mean? - javascript

According to the Webpack documentation https://webpack.js.org/guides/getting-started/
Webpack is used to compile JavaScript modules. Once installed, you can interface with webpack either from its CLI or API.
But what does compile in this sense mean? JavaScript clearly isn't a compiled language so how can Webpack "compile" JavaScript modules? Should't it rather say bundling instead?

Webpack isn't a compiler it's a bundler, but like a compiler it parses your source files, Webpack bundles your code and you can set it up in a way that it also transpiles (transforms) newer JS syntax into older but more widely supported syntax and it also allows you to split your code into different modules using commonJS or es6 modules and bundle them together in a way that will make them work inside a browser in other words it compiles "source" (doesn't work in browsers) to "target" which is bundled and can be parsed as one program.
also most JavaScript engines nowadays use Just-in-time compilation meaning that JS is a compiled language, it's not compiled ahead-of-time but the engine parses your whole JS file then compiles and executes it chunk by chunk.

Related

SystemJS - TypeScript loader use cases

I have a question regarding following TypeScript plugin for SystemJS :
https://github.com/frankwallis/plugin-typescript/
Here is its description
A plugin for SystemJS which enables you to System.import TypeScript files directly. The files are compiled in the browser and compilation errors written to the console.
I wonder what would be the use cases of such plugin.
Why would developers import directly ts files and compile them in the browser instead of compiling them during development and import js files ?
Won't it reduce performance and load time to do it in browser ?
Is it supposed to be used only in development environment ?
plugin-typescript author here. In-browser compilation is strictly a development tool, in production you would use systemjs-builder (in combination with plugin-typescript) to create a single file containing all of the transpiled javascript.
Since the plugin was originally developed, a number of new workflows have become available when using typescript & systemjs (typescript single-file transpilation, vscode, systemjs hot-reloading, typescript system.register output, to name a few...) - Which one is right for you will depend on the size of your application, the platform/server you are using, and your own personal preferences.
No one in their right mind would compile/transpile in the browser for production; it's the equivalent of sending a turtle to get your mail because you don't like walking.
This is strictly a development tool for helping TypeScript devs avoid having to constantly compile after every change, with the added benefit of providing features like hot reloading.

How to expose TypeScript modules in NodeJS?

I have a library that I'm building in TypeScript. I'd like to include this library in both TypeScript and JavaScript Node projects. What is the general strategy to do this? Should I compile and have two versions or is there some other strategy I should be using?
I'd like to include this library in both TypeScript and JavaScript Node projects. What is the general strategy to do this?
Compile with the following to get the js output:
--module commonjs --outDir ./dist
This should make your project consumable by JS projects. To make it consumable by TS projects you need to generate a declaration file. This can be done using https://github.com/SitePen/dts-generator See usage for details : https://github.com/SitePen/dts-generator#usage
Note: There is discussion on removing the dts-generator dependency : https://github.com/Microsoft/TypeScript/issues/2338
In most cases I have seen you have a /dist/ folder where the compiled JavaScript is located.
Usually there is also a minified version like yourfilename.min.js - the rest is either outside or in a /src/ folder, so outside you have only the license/readme.md, package.json left and maybe the file for Grunt/Gulp (it is considered polite to - if you use a taskrunner - include a Grunt/Gulp file for compiling the typescript and minify the .js file afterwards, as far as I got it)
If you want to preserve the TypeScript advantages when using it in TypeScript projects, then you obviously have to expose a TypeScript version of the code so the TypeScript compiler can see the TypeScript declarations for your interface.
But, if you want people to be able to use your library in plain Javascript projects (that don't compile TypeScript into JS), then you have to offer a version that has a plain Javascript interface and where the code has already been compiled into plain JS.
So, if you want both of those advantages, then you have to offer two separate versions. The plain JS version can obviously just be a compiled version of the TypeScript (compiled into plain JS).

Can I compile Traceur into one file? (including runtime for classes)

I was attempting to use Traceur for a few small client-side micro libraries that I maintain. I would like to refactor them to use "classes" and a few other ES6 features and then compile an es5 version for production.
However, once I add classes the compiled out requires the runtime which is really big for all I need (just extending constructor functions). Is there a way to configure it so that it puts just what it needs to run into one file like CoffeeScript?
You can build your own runtime by following the recipe in the Makefile and omitting the files you don't need. traceur is 'self-hosted' so you use the ./traceur command with inputs and flags to create an output file which is the runtime source. Start with make bin/traceur-runtime.js then whittle down the files until you have what you need.
We are working on an automated way to do this, but it's not likely to be done soon.

TypeScript compile .js

I want to use typescript in ES6-compatible mode, as a partial replacement for ES6 classes, because it is quite convenient and clear compiler, comparing to traceur/sweet.js macros.
How can I compile files with .js extension?
tsc src/util.js gives error TS5007: Cannot resolve referenced file: 'src/util.js', whereas tsc src/util.ts works just fine.
There are both util.js and util.ts in src directory, but I don’t want to have any .ts files.
You can't. It is intentionally not supported by the TypeScript compiler so as to avoid confusion for beginners.
However you can use the typescript compiler api, pass in your content and get the output you can write to file yourself.
There are plugins for grunt/gulp builders: gulp-typescript and grunt-typescript, which can make any sources, even non-.ts compiled with typescript.
Gulp-typescript implicitly uses typestring, which compiles any string with typescript code, and which is just a wrapper for the typescript.api - node.js API for typescript. Unfortunately, gulp-typescript is not fully complete - no errors logging, no compiling options, so you might need to use typescript.api straightaway.

Are there tools for compiling CommonJS modules into a single .js file?

Are there any tools that can compile modules written with CommonJS/Node-like modules (require, exports, etc.) into a single .js file to be served to a browser?
Sounds like you're looking for Browserify:
https://github.com/substack/node-browserify
"Make node-style require() work in the browser with a server-side build
step, as if by magic!"
Another quite similar utility named CommonJS Compiler and Grunt task respectively you can find at https://github.com/dsheiko/cjsc
It uses Esprima syntaxTree while parsing require() calls in the modules. It enclosures each module in a unique scope and does the caching in the very way nodejs does. It works fine with UMD (universal module definition) modules. What I like most, it adds during compiling very little of code - small require function body plus define-call wrapper per module.
If you want something you can use directly from PHP, try cjsDelivery.

Categories