Turn a global into an npm, browserify, etc. module - npm

I've built out this simple library https://github.com/FarhadG/script-tag-data and you can either clone it down or install via bower but I'm curious how I should go about turning it into an npm, browserify, etc. module.

Since you already have your project on github, for publishing to npm, you can follow the guide over here : npm-developers
AFAIK, browserify doesn't have a registry. You probably meant bower. Follow this guide : Creating Packages
And maybe use Google search next time, yeah?

Related

Fork and install Create React App without publishing on NPM

I would like to fork Facebook's Create React Repo and use it as a dependency instead of their own react-scripts. All tutorials on the subject publish the forked repo to NPM to install via the normal way.
However, my client would prefer to not do that as both the forked Create React App and my React App repositories are hosted in the same Azure workspace.
I know CRA is a monorepo and uses Lerna. Does that make it possible?
You could upload the package to a online git repository like GitHub. It can even be private if you want. The command to install it would then be: npm install --save-dev github:username/repo-name
If you're gonna make the repo private then you need to have SSH keys setup on GitHub and on all machines on which you will be installing the dependency on.
You could also install the dependency as a path if it's on the same file system but I have bad experiences with that so I don't recommend it.
I've personally done that at a previous organisation. We copied any package that we forked, when heavy changes were necessary, inside our monorepo. Lerna (or yarn, or what ever) takes care of the rest.
If you have a lerna monorepo, you'd take the content of https://github.com/facebook/create-react-app/tree/master/packages/react-scripts into your monorepo, in say: packages/custom-react-scripts and change the name of the copied package in the package.json
If you'd like to rename react-scripts binary into custom-react-scripts you could do that as well via the "bin" configuration inside the copied package.json
All the renaming steps are of course optional, but it helps to know that you're not using the official tool.

If I need to manually custom code from npm module, how should I do it

In the react-native world I came across using many lib packages, some of them are outdated or not maintained. By going through the issue ticket or google for some solution to some bug, sometime I found a solution but how should I apply it?
I normally just change the code inside node_module directly, but I know this is really bad way cause it not even my git and gonna be lost at some point
what is the proper way to do this?
You can install node modules that aren't in the registry.
See: https://docs.npmjs.com/cli/install
Specifically these two methods are worth a look.
npm install <git-host>:<git-user>/<repo-name>
npm install <git repo url>
If the module in question are hosted on github, clone the repository, apply the patch to it there, and then use the module directly from github.
You could also see if anyone else is maintaining a fork of it.

I need a bower alternative

I am working on a project with dotnet core, in Linux and it is using MVC.
I am reading a book for learning how to put things together. The book advises installing Bower. But the last time I researched bower I believe they were advising towards using something else for new projects.
I would like to know what alternative I can use for front end management. I need to be able to use Bootstrap, Jquery, Popper and Datatables on my page. And of course, I should be able to use it in Linux.
Thanks for the help francium. NPM is working just fine.It is in the official Ubuntu repository. You have to install popper the following way though: npm install popper.js --save
If you don't specify the .js extension it will give you a warning saying that bootstrap requires a popper installation but it was not installed. You also have to install git on your machine to make it work. I did not do it the first time I ran it and it gave me an error asking me if it was installed. Thanks for the suggestion, It was relatively easy to do get things working.
Yarn is now the alternative to Bower, but to install Yarn you need to use NPM

Starting an ExpressJS app using my favourite tools

I'm a front end dev who wants make a blog/portfolio site using express js.
I've used codekit in the past to compile,minify & autoprefix my JADE/SASS files, and to minify my JS files, but I have no idea where to start when going full stack. I've been reading up on gulp (as I assume this will do all the things that codekit does) but I don't understand fully what I need.
Do I need bower aswell? Do I control all the gulp plugins using NPM?
How do I get all this to work with Zurb Foundation 6?
If you are planning to use Express, then Gulp is a good choice. Like you said, gulp can automatically do all the stuff you need; also is very customizable. You don't need Bower to use it, personally I don't use Bower but I use Gulp. All the packages are managed by Node Package Manager (npm). Finally I don't know about support of Zurb Foundation 6. By a quick research I see there is a npm plugin for version 5, but I think there's not one for version 6.
Here's a link with all npm packages and a guide to begin using Gulp:
https://css-tricks.com/gulp-for-beginners/
https://www.npmjs.com/
I hope my answer help you.

What is new in spm.js

Just learned that there exists another package manager: Static Package Manager or spm.js - http://spmjs.io/. From brief reviewing of the documentation the tool seems very similar to "old good" Bower.
Is it so? What is different about spm.js that Bower or npm don't provide?
spm.js, bower, volo, component, jspm, npm + browserify etc. all serve front-end developers and the end result you get is very similar. Here are some differences to consider:
spm.js manages binaries via the publish command similar to npm, where as bower fetches from git endpoints (however there's discussion to change this)
spm.js packages are CommonJS packages and it's recommended to use it with the module loader sea.js, bower is indifferent about module loaders, npm isn't optimized for front-end dev yet, however browserify helps
Both spm.js and sea.js are popular within the Chinese developer community as they're driven by the great folks at Alipay. Though there's English docs, most discussion on github happen in Chinese (e.g. discussion on positioning & the future)