What is the "Node way" to split code across multiple files? - node.js

Question

I am currently working on a NodeJS/Typescript project, it is a HTML5 client with a NodeJS server that communicates via web-sockets. Coming from a C# background, I like to keep my code separated into different files for different things, including a shared file for objects to be serialised and de-serialised for sending/receiving data in an organised & well defined manner.
Currently at the server side, i have the build options set to compile it down to a single JavaScript file and I have that as my startup script, but I believe this to be a messy solution to my problem. To fix an issue with the order of the output file, i have also had to put an ordered list of references to the various TypeScript files at the top of my "main" typescript file.
This seems like the complete wrong way to do it, is it possible to still separate out different Typescript(/Javascript) files so that different areas of logic are in a dedicated place, whilst still being able to share a file be between my HTML client & my NodeJS server, or is this just a workaround i am going to have to learn to live with?

Answer 1

You could use webpack module bundler to avoid your ordered list of references. Webpack takes care of all dependency resolution and referencing. To share code between server and client, you could seperate it out in a common module/package and import it on both sides.
I use webpack to compile my Typescript code to ES6 code for the server code and with an extra build step (babel.io) to browser compatible code.
The following example configuration shows the usage of webpack with Typescript:
var path = require('path');
module.exports = {
entry: {
app: [ path.join(__dirname, './src/App.ts') ]
},
devtool: 'source-map',
output: {
path: path.join(__dirname, './build'),
filename: 'js/bundle.[name].js'
},
module: {
loaders: [{
// The loader that handles ts and tsx files. These are compiled
// with the ts-loader and the output is then passed through to the
// babel-loader. The babel-loader uses the es2015 and react presets
// in order that jsx and es6 are processed.
test: /\.ts(x?)$/,
exclude: /node_modules/,
loader: 'babel-loader?presets[]=es2015!ts-loader'
}, {
// The loader that handles any js files presented alone.
// It passes these to the babel-loader which (again) uses the es2015
// and react presets.
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015']
}
}]
},
resolve: {
extensions: ['', '.ts', '.tsx', '.js'],
modulesDirectories: ['node_modules', 'src', 'lib']
}
};