I'm using iced-coffee-script with node.js. I haven't been pre-compiling my .coffee files but instead am just requiring the iced-coffee-script package from my .js application startup file. Does anyone know of a way to trigger sourcemap creation in this situation so that https://github.com/evanw/node-source-map-support will work?
Related
I always wondered how I can properly add the clientsided javascript in my express project. I use Typescript and I would also like to take advantage of the Typescript typings (for jquery for instance) when writing my clientside javascripts.
My project structure looks like this:
root
dist
src
helpers
models
registration
router.ts
form.pug
profile
router.ts
profile.pug
wwwroot
css
js
images
What I have done until today:
I created all clientsided javascript files in wwwroot/js (e.g. jquery.min.js, registration-form.js) and I loaded them into the header of the appropriate pages.
Disadvantages:
I had to write ES5 javascript which is compatible with the browsers we would like to support
I couldn't put the javascript files where they logically belong to (e. g. I'd rather put my registration-form.js into src/registration/ instead of the wwwroot)
No Typescript possible :(. No typescript typings, no transpiling to ES5 etc.
In some tutorials I saw they would simply run npm install --save jquery and import it in their clientsided files. So I feel like I must have missing some pretty important stuff, but I couldn't find any tutorials about it.
My question:
What is the "right way / best practice" to write clientsided javascript in Typescript / Express applications (which should also elliminate also the mentioned disadvantages)?
Using TypeScript on the client side is not much different from the server side.
Here is what you can do:
Create client folder for client-side typescript sources
Put tsconfig.json into client folder and configure it to produce "es5" code (target: es5)
Install jquery types (npm install --save-dev #types/jquery)
That's it, now you can write your client side code in TypeScript.
You can compile server-side code with tsc -p ./src (having server-side tsconfig.json under src) and compile client-side code with tsc -p ./client.
I made a simple example of such app, check it here. I put the simple script to build everything into package.json, so you can run npm run-script complie to get both server and client code complied into /dist folder. Then run it with npm start.
Further steps:
Automate your flow: you should be able to start your app locally and then just edit source TypeScript files and the app should be reloaded automatically. This can be done with webpack / gulp / grunt or custom shell script that can be triggered once any of your source file has been changed and saved.
If you find yourself writing good amount of client-side code, check also angular (https://angular.io/docs). It uses TypeScript as preferred language for client-side development and you'll be able to build much more powerful client-side app using it. You may choose another library as well (react, vue.js, etc), see the examples on the TypeScript site.
I need to compile .ts files in node.js environment but without bundling. Is it possible to do that, just compile without resolving and so on?
In the data-main require js file, we write like this:
paths: {
jquery: 'lib/jquery',
underscore: 'lib/underscore'
}
What I did was manually download the row JS library files and make "lib" folder and move the file into the folder and change the file name if necessary.
I use Nodejs for server, and I am wondering if there's any tool to create these client-side Require path files automatically from the installed Node-Modules. Browserify does a similar job if I don't user Require (creating one JS file, and call it in the other browser JS files.) But it seems like Browserify cannot be used as a path in Require.
Any thoughts? Thanks.
An alternative solution (to browserify, with which I'm not familiar) is to use bower for managing client side libraries. It is similar to node/npm, but is geared towards browser libraries.
It will not copy or rename libraries, because that step isn't necessary. Instead the libraries will be placed in a directory called bower_components. The paths config would look like
paths: {
jquery: "../../bower_components/jquery/dist/jquery",
bootstrap: "../../bower_components/bootstrap/dist/js/bootstrap",
...
}
(the actual number of .. in the path depends on values of other requirejs options).
In development, when all dependencies are loaded asynchronously as separate files they will be loaded from bower_components and requirejs optimizer will find them there when generating the optimized single source.
Adding the dependency paths to the config file can be half-automated with grunt plugin grunt-bower-requirejs. The idea is that after a library is installed using bower install LIBRARY it's path can be added with grunt bower.
I'm using coffeescript while writing a node js app and use cake watch to compile my js files real time.
That's great to be able to do that - but where should I stick those js files? Right now, I'm saving them right next to their respective coffeescript files, but that just feels awkward...
The convention I've gotten comfortable with is to put CoffeeScript files in a src directory and have "compiled" JavaScript output to a lib directory. Like so:
package.json
lib/mymodule.js
src/mymodule.coffee
If you publish the module to the npm registry, you can just include the resulting lib directory, which is conventionally where projects written in JavaScript keep there .js files. This keeps everything consistent.
I'm using ExpressJS and the app.js is straight JavaScript. If I wanted to use CoffeeScript, would I have to rewrite app.js or can I just write my additional files with CoffeeScript?
Are you talking about using CoffeeScript on the server side, or serving it as compiled JavaScript to the client? Either way, it's pretty easy.
You can load .coffee files with require, as long as your application has loaded the coffee-script library first. So just start your app with
require 'coffee-script'
(after installing it with npm, of course) and from that point on, any time you write
require 'foo'
from any part of your app, it'll look for both foo.js and foo.coffee. (Obviously the converse is true that a .coffee file can require a .js file; from Node's perspective, the .coffee file is just JavaScript.)
As for serving CoffeeScript as JS to the client from Express, I suggest taking a look at my connect-assets middleware.
As of Coffeescript 1.7.0 you need to
require('coffee-script/register');
vs the mentioned
require('coffee-script');
If you require("coffee-script") from a .js file, you can then subsequently require("some-module") where some-module is written in CoffeeScript and it will 'just work' without a manual compilation step required.
See this question: require()'ing a CoffeeScript file from a JavaScript file or REPL