Can someone give me some advice or links for discussion on whether I should bundle JS for backend?
I tried to Google with this title (and similar words) and I can't get any useful links.
Just want to know, say I am using latest Node.JS (es6-ready), should I bundle/compile the JS? If not, how am I suppose to use typescript/flow?
Thank you.
I feel like you are asking two different questions. I'll try to answer both.
How can I just run TypeScript code?
This is the one your question's title seems to ask ("How to use typescript/flow in nodejs without compiling it"). For this, you can use the ts-node package on npm. But it's usually not a good idea to use ts-node over just compiling when running in production because it tends not to be as fast.
How should TypeScript code get distributed to be run?
Any TypeScript code will need to get compiled from .ts files to .js files to eventually be run. Basically something like the same thing applies to Flow code.
If you plan to distribute a package written in TypeScript, you should be publishing the .js and .d.ts files together. This is so that
Your package consumers don't have to recompile your package. (they already get .js files.
Your non-TypeScript consumers don't need to install TypeScript to use your package. (they already have runnable .js files)
Your TypeScript consumers can get good type safety and completions. (they get your .d.ts files)
For more information, see the TypeScript documentation on Publishing Declaration Files.
Related
I have an emscripten/webassembly wrapped C++ class that launches and uses pthreads internally. It generally works fine when used in javascript on Chrome in its stand-alone development sandbox. However, I can't really get it to work with create-react-app and webpack (i.e. I used react-app-rewired to be able to configure webpack).
The problem seems to be from the complexity of the javascript and wasm files that a threaded emscripten build creates, and the confusion those scripts have due to the renaming of files that webpack produces. The files produced for a multi-threaded emscipten build are:
MyModule.js
MyModule.wasm
MyModule.worker.js
I can (I think) get it to work in the non-threaded mode where there is just a MyModule.js and a MyModule.wasm file through the use of the Module's locateFile method. However, the system gets very confused due to the introduction of the new MyModule.worker.js file which the MyModule.js file launches on its own within a WebWorker. And of course the MyModule.worker.js file needs to also find and get access to MyModule.wasm, and that gets lost too (i.e. can't find the right file name due to the webpack renaming).
Anyway, I've spent hours searching the web for any successful use cases like this, and trying may things, including manually editing the MyModule.js and MyModule.worker.js files, but without any luck so far.
Has anyone successfully tried something like this, or any other advice on getting a multi-threaded emscripten/wasm build to run properly with webpack (or create-react-app)? Any advice would be greatly appreciated.
NOTE: This question isn't about running a emscripten/webassembly module in a web-worker thread (although in the end I'm going to run all this in a web-worker). Its specifically about a multi-threaded emscripten build (i.e. C++ with pthreads) launching and running properly with webpack.
In Module's locateFile, you should return the correct path for MyModule.wasm and MyModule.worker.js.
Besides, In Module's mainScriptUrlOrBlob, you should assign the path for MyModule.js.
The mainScriptUrlOrBlob is used in worker for loading the wasm.
I'm just starting to learn Angular, I installed in my Ubuntu Linux:
Angular CLI: 7.1.4. and
Node: 10.14.2.
My question is, why one project is too large? I mean a simple "helloworld" is 334MB, I don't know why, Is it possible resize it? or delete any folder that is unnecessary? Or Is there something wrong with my installation? (how can I detect that?)
The bigger folder is node_modules, and when I create my projects, generates a lot of folders.
I was reading about "angular lazy loading", but I'm new.. It is not totally clear for me.
this is the folder spaces:
Please... I hope somebody can help me...
best regards
You might be using big bundles which are not needed, so you can break them up:
https://medium.com/#julienetienne/javascript-bundles-are-too-big-break-up-the-libraries-3be87d5ef487
In modern JavaScript, projects require modules that themselves require modules that require modules... resulting in node_modules directory with hundreds of dependencies. A 100Kb library might be included because someone needed one function from it. JavaScript is not compiled, so all that source tends to be rather big. This is an unfortunate, but unavoidable truth; your Angular project directories will be big, and there's nothing you can do about it. It is perfectly normal.
The good part: modern JavaScript deployment typically includes packing up those libraries with Webpack or Parcel or similar code bundlers. Most of them implement "tree shaking", which analyses the code to find only the functions that are potentially utilised starting from the entry point, and only bundle those, ignoring the rest. This means that 100Kb library whose one function is used is transformed into just that one function in the final distribution bundle.
Not all of the bundlers are equally good at it at this point. For example, Webpack cannot tree-shake the CommonJS modules, only ES6 ones.
You can remove node_modules folder when you are not going to use the app.
And, when you need work on the application, you can re-generate node_modules using the command: npm install
Those are just node-modules, they are needed for building the project, but not necessarily everything inside of them will be deployed to production. As Amadan said, there is a process of tree-shaking (filtering only used modules) and also in production you use the minified version of the same JS code (where for example whitespace is missing and variable-names are shortened), among other optimizations. A production-optimized Angular project should not be more than a 100KB for a hello-world application.
In the provided image I see packages like
selenium-webdriver
protractor
Those belong to dev-dependencies (see your package.json file) because they are used for testing. When building for production, no code from dev-dependencies should be included. The typescript package (which is nr.2 in size in your screenshot) will also not be present in production because types like string are only used for writing Typescript code, but the browser receives Javascript, which it is compiled to.
I look at many projects on Github to learn through the examples, but one thing that confuses me is when you have a package that is multiple directories deep and has webpack.config.js files in multiple levels of the directory tree.
From my understanding webpack is bundling up all the js code and making it watchable. I don't understand how multiple bundlings would work out.
For example https://github.com/ojame/react-scrollbars
On the top level you have a package.json and a webpack.config.js(So I think oh this is where I run npm install and then webpack)
But I want to see the examples in the "examples" directory and there is another webpack.config.js, which is confusing to my webpack newbie brain.
What's up with this? Where do I do my bundling to check out this resource? Maybe using the example above would illustrate the solution well.
Examples often behave like their own repository. They show how you, as a consumer, would use the package. Because you would have your own webpack config, so do the examples.
I want to start formally documenting my NodeJS project written in CoffeeScript. After investigating most of the documentation options I've decided to (attempt to) go with JSDoc.
Given that I've installed this globally with NodeJS, is there any way I can get JSDoc to recognize my .coffee files the way Mocha and Node itself do? (Both support compiler flags, eliminating the need for build tools like Grunt or Gulp)
Since JSDoc uses espree(JavaScript AST parser), you can't do that. But some alternatives like Codo or Docco exist.
I'm a Node n00b starting a couple web app projects using Express, and I've got some common client-side libraries I'd like to share between the two projects. This seems like a very common problem, so there must be several solutions available already.
I come from a java background, and in java, I'd create a separate "common" project and "overlay" common WAR over my project during packaging. This would also allow for r.js optimization during the build process.
My best guess in Node is that I need to create a private NPM module, and map those common files into express via a use() middleware plugin. Is that right?
How, then, can I package both my common and project specific javascript into a minified file using r.js?
Or is source control the answer? Checking out my "common" repository inside each project?
Any help would be most appreciated. Thanks.
This seems like a very common problem, so there must be several solutions available already.
Good news: Yes, this is a common problem. Yes, there are several "solutions".
Bad News: All of the "solutions" are at least partially terrible.
Here's my advice:
1) Individual .js files should be coded as CommonJS modules
2) Groups of related .js files should be made into npm packages
3A) Use them in node via the regular node.js/CommonJS require function and use browserify to use them in the browser
3B) OR use a built tool like grunt to wrap commonjs into AMD format for use with requireJS in the browser
3C) OR consider something like component.io components