Scenario: I currently have to work on a Coffescript project that is (at the moment still) tied to using some outdated and long forgotten browserify predecessor.
stitch : https://github.com/sstephenson/stitch
example output : https://gist.github.com/gilligan/00206343c41331ac9ce6
Question : What is the best approach for creating source-maps for the resulting file that is created from compiled coffeescript ? Would I have to add sourcemap generation to the stitch processing itself using something like https://github.com/mozilla/source-map/ or is there a more high-level/generic approach that could be applied in this scenario ?
For adding a source-map for coffee-script just use the node-js command line tool from the coffee-script package.
Example: (from coffeescript.org)
Compile a directory tree of .coffee files in src into a parallel tree of .js files in lib, plus creating the source map files:
coffee --compile --map --output lib/ src/
Personally I would do something like described in this tutorial - creating a sublime workflow.
Hope this helps!
Related
Is there any canonical way to create a plain, non-minified JS source tree (eg. using ES modules), that just runs on the desired target (nodejs / browser) from NPM packages?
I like do work in a small non-IDE environment, and never use packaging by myself for small projects. But third-party code is almost always shipped JS and TypeScript inside npm packages that use sophisticated build environments (just got npm, tsc, yarn, parcel, rollup, ... needed to build a single 3rd-party module).
So I would like to have all those build tools "do less" and just emit plain, human-readable JS with somewhat sane file structure (eg. like single file or original source tree). Basically convert a bunch of referencing npm packages to a sane source code tree that doesn't need megabytes of tooling to build itself anymore.
Any ideas welcome!
I need your help with website project I'm working on. My project consits of 7 html documents, 3 stylesheets, 8 .js (including jquery.min.js and some jquery plugins) and some pictures. I want to bundle and minify it as much as it is possible (it would be good to get only 1 css and 1 js file or maybe 1 js, which contains styles inside).
For clarity - now, when I have all dependencies in html - everything is working properly. But I'm not sure how to set all module.exports and requires. Could you tell me how to do it step-by-step in a proper way?
Many thanks in advance.
PS. I write in ES5, so I don't use Babel.
You can do the following to make your codebase a bit more tidy.
Manually group the content of your relevant js files into one and export it as a nodejs module by using module.exports = module_name on the top of your merged js script (Repeat as needed for any jscripts in your project).
Then include the exported module in your main node file and include its main functionality using var modulesfile = require(./module_name); Please note directory paths while importing your js modules.
You can also run a minifier like minifyjs to make your js files size even smaller if they need to be called multiple times from a url. Nodejs installation and usage for minifyjs can be found here.
You can also call other css from within existing ones by using the
#import url("./css/filename.css"); Just verify proper css directory paths first.
In case you also want to use browserify for node there is a full guide in the npm website.
Another good and simple solution is to move all of your codebase in a visual studio web project. From there you can do pretty much what you want, organize your scripts and css files (/Scripts and /Content directories) in bundled configuration files etc.
NOTE: All your code has to be migrated to an asp .NET project to use this approach (as per Microsoft doc) properly.
It would be nice if one can run node.js code inside Excel user-defined functions. Something like using js code like VBA.
I googled for solutions but cannot find any. Is it possible to do this?
Yes, if you want to use packages from NPM. You could use webpack to combine all the stuff to one js file, it should work.
webpack as a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph which maps every module your project needs and generates one or more bundles. you could refers to this document.
You could also refer to a sample, Yeoman, the Yeoman generator creates a Node.js Office Add-in project. it use webpack combine all files into one js file.
I'm currently developing a web-app using node/npm and grunt. I'm new to web-development and come from java development. This is how my prototype's structure looks like:
prototype
|--app
|--index.html
|--index.js
|--dist
|--index.html
|--index.js
|--lib (currently empty)
|--Gruntfile.js
|--package.json
I plan on developing with following structure: My code will be modularized by using npm modules in the lib folder. Those will be included in the index.js. The index.html and index.js files in the app folder will be built for the browser using grunt-browserify and grunt-contrib-copy; results will be put into the dist folder. I also plan on using bootstrap.
In the bootstrap starting-guide, there is written (source), grunt dist would regenerate the dist folder with bootstrap included.
My first question is: How does that happen? I guess you have to place the bootstrap folders somewhere. Or do I need to install some bootstrap related package? In short: How does grunt "know about" bootstrap?
My second question is: How could I include this process in my gruntfile? Right now my gruntfile uses browserify to browserify the index.js and copy to copy the index.html. Those are registered at the goal (is this the right term?) default: grunt.registerTask('default', ['browserify', 'copy', ]);. I'd like to alter this goal by adding the bootstrap magic that happens in grunt dist.
Any help is much appreciated!
The target you are referring to is in bootstraps build environment. You can download this with npm install bootstrap#3 The grunt dist target they are referring too is contained in the downloaded node_modules\bootstrap\Gruntfile.js and is used to compile bootstrap itself for distribution.
grunt.registerTask('dist', ['clean:dist', 'dist-css', 'copy:fonts', 'dist-js']);
The dist target uses several grunt modules like grunt-contrib-htmlmin and grunt-contrib-cssmin and not all may be desired in your setup.
I would suggest taking a look at this file and each of the targets called and modules used for some more guidance on how to proceed.
If you just want to use bootstrap in your project you can download the already compiled and minified libary here and just add them to your project.
I'm working on a project which uses js source files from multiple directories and compiles them into a common dist/ directory which is used in production. One way I can test my changes to the js code would be to make the changes into the source code and reinstall the entire project to generate the new dist/ directory. Is there an easier and more practical way to do this?
As I like my production and development environments to be (mostly) equal I use source maps for this issue. This is the way I usually build by js:
JS Hint
Generate Source maps
Concat JS into one file
Uglify
I do this by using gulp and some plugins. Those shouldn't be hard to find.
The benefits of this aproach are:
Serving a small js file
no difference between dev and prod
readable JS source for debugging
no redeploy needed