I have a javascript (which uses files from it's own project) file that I need to use in a different project without copy the code.
How can I do it?
Thanks
Well... You could install Bower, upload your file to your own repository or gist on GitHub and then use bower to include them as a dependancy for your project.
Setting up (assuming you have Node.js already installed)
npm install -g bower
cd /path/to/project-A
bower init
bower install <link to your gist/repo> --save
cd /path/to/project-B
bower init
bower install <link to your gist/repo> --save
And then in the future, if you upload changes to your repo/gist (and the link has not changed...)
cd /path/to/project
bower update
EDIT: That or you have a remotely hosted version of this file that you directly link to, I guess...? Kinda sucks though, could wreck a live project from a dodgy edit that way
Related
At my organization, we are trying to create a monorepo of react components so they can be used on several sites.
We currently have a repo called react-components hosted on bitbucket and we wanted to set it up as a monorepo using lerna.js so the structure would look like
packages
package_1
package.json
dist
package_2
package.json
dist
However we don't host our npm packages on a registry but rather bitbucket and install them from there
so I'd like to be able to install each package into our websites via package.json like
"#company_name/react_components/package_1": "git+ssh://git#bitbucket.ds.company_name.com:7999/np/react-components.git#personal/jdaly/testBranch",
however I don't think you can have that path in a package.json
so it should be more like
"#company_name/react_components": "git+ssh://git#bitbucket.ds.company_name.com:7999/np/react-components.git#personal/jdaly/testBranch",
and import like
import package_1 from "#company_name/react_components"
is it possible to set up a monorepo without using a package registry and just import all the monerepo packages via a git link? Haven't found much information on the web
I followed this tutorial https://blog.npmjs.org/post/186494959890/monorepos-and-npm
But you're still importing your modules/packages via a package registry rather thank installing via a git link
After I build my packages I push them to the repo
and in my website package.json I am referencing it like so
"#company_name/react-components": "git+ssh://git#bitbucket.ds.comapany_name.com:7999/np/react-components.git#personal/jdaly/firstCommit",
and when I go to node_modules the structure is
node_modules
#company_name
react_components
packages
package_1
package_2
package_3
lerna.json
package.json
when it should be
node_modules
#company_name
react_components
package_1
package_2
package_3
Any help appreciated
To anyone who stumbles upon this question - the answer is simple. In order to use lerna and create a monorepo system you need to have a package registry. That could be NPM or another product like https://verdaccio.org/ which is essentially a package registry you can use locally
Try the following:
npm install git+ssh://git#bitbucket.org/{user}/{repository}.git
Sources:
npm-install-modules-from-bitbucket-private-repositories
git-urls-as-dependencies
How-can-I-install-an-npm-package-from-my-bitbucket-repository
For some, this will suffice:
You may install packages from the same monorepo, without installing from a registry, by referencing the folder in the same repo or a tarball built in a separate folder in the same repo.
Examples:
npm install ../package_1
npm install ../package_1.tgz
Reference: https://docs.npmjs.com/cli/install
See npm install <folder> and npm install <tarball file>
However, consider carefully before going this route for production codebases intended to be long lived. This is excellent for quick and dirty solution w/o using registry, but consider...
How you will support multiple versions as packages produce backward-incompatible changes (major version bumps)
How will your packages be built through your build CI/CD pipeline
when i want to use some library, such as Croppie, i should install it by using npm or Bower:
npm install croppie
bower install croppie
As i am using a server, i dont know where is should install it. On the server? in the wordpress files? or in the same folder that contains JS file for this library.
Thanks a lot
Basically you need to add script in your wordpress web app. So there are multiple ways to do so.
1) Add <script src="https://raw.githubusercontent.com/Foliotek/Croppie/master/croppie.min.js" />. It's better either you download this file in your file system or add a CDN link of Croppie.
2) If you have bower.json configured in your project you can use bower install croppie and then link it in your index.php (root file)
If you just have copied your project over to your server, you should have a package.json file, which contains all libraries you used. (Given you saved it via npm install croppie --save or npm install croppie --save-dev)
Then you can just go into your directory which contains the package.json and run npm install.
If you ever install a library which you would like to use without a project, you can install it globally with npm install libraryName -g, thus making it available on the command line.
In general, if you develop locally and deploy to a server, you should install dependencies locally, in /wp-content/themes/(your-theme)/ and don't upload them to your web server along with the rest of the site. The .bowerrc file, placed in the theme directory, should include the target directory in which bower will place the dependencies you've required:
{
"directory": "bower_components"
}
Then you'd want to bundle those dependencies in css/js etc. directories within the theme and deploy those. .gitignore the bower_components directory or just don't FTP that directory up, depending on how you do things.
In current project I have pretty big bower file. Many dependencies are out of dated and have hardcoded version like ~1.2. I have replaced it with "latest" and run bower install/update and everything went ok.
The problem is that I don't want to have such settings like "latest" on production server. What is the easiest way to grab current versions of bower components and put it to the bower file? aka generate bower file from existing dependencies.
Using bower init, you'll be able to regenerate from scratch your bower.json file with all the current dependencies
With bower install --save jquery#<version_number> you can install specific versions of bower components, e.g.
bower install --save jquery#1.10.2
the --save automatically adds the dependency to bower.json. Normally there is no need to edit bower.json manually.
I've only just started using Bower, so I'm likely doing it wrong. However, when I pull down jQuery through bower using this:
bower install jQuery#1.9.1
I get a folder which is about 700k in size. The only thing I need in that folder however is the jquery.js or jquery.min.js, which are 239k, and 82k respectively.
As far as I understand it, this is because bower simply pulls down everything that's in the Github repository whether it's needed or not.
Is there any way to stop this? So that bower only pulls down what is needed to develop? Or Am I misunderstanding how I should be using Bower?
Thanks.
You're using it correctly. You should have a bower.json file with all of your dependencies specified so that you don't have to include bower's plugin directory with your source code, then just run bower install from a new machine to get the dependencies.
When you install a plugin and want your bower.json automatically updated, run bower install mydependency --save.
In my project I've installed bower components without save option. Now, I would like update to bower.json?
How can I update bower.json with installed packages?
Just list your dependencies:
bower list
Then you should run all install command with param '--save' like this:
bower install bootstrap --save
It's a hard work, but if you have a thousand dependencies, could you create a script to automatize the task.
A little trick if you don't want to write a script for that:
before doing anything rename your bower.json in bower2.json for example.
then you can do a:
$ bower init
(automatically create a bower.json file).
note that all questions should be pre-filled with your current config.
When it will ask you:
set currently installed components as dependencies?
say yes,
You now have all your dependencies in the new bower.json file (and you can check if everything is right with the old bower2.json)
A bit arduous way is to run bower list, look for packages labeled extraneous and add those manually to the dependencies in the bower.json.
If there are a lot of extraneous packages, it might be easier to workaround this by running bower init and answering Yes to "set currently installed components as dependencies?". This will take your current bower.json, read it and then create new one using information from the old one. So in an ideal case you will have the same file just with extraneous packages added.
Warning: Firstly, there might be something lost in the process (e.g. devDependecies). Secondly in the last version of bower (v1.2.7) this will not preserve current packages info! I feel it is a bug. However you can save the old file and (manually) merge it with the generated one.
Also, you should ask for an option or something by opening a bower issue as this would be welcomed by many developers.
You can use bower-check-updates (you need installed node.js on your machine):
bower-check-updates is a utility that automatically adjusts a bower.json with the latest version of all dependencies
bower-check-updates - is a fork of npm-check-updates, so it's all the same but updates bower.json, instead of package.json
npm install -g bower-check-updates
bower-check-updates -u
bower install
This will install bower-check-updates globally, so you can launch it from anywhere.
P.S. for more information about npm-check-updates pleas see this topic
If there aren't that many bower packages you have installed, try writing bower install [package_name] --save. This will just update your bower.json file.
After bower-check-updates -u you must run bower install instead of npm install