I have a git root project where I am using inside my root project a git subproject.
So for example I have the project MyApp and a subproject UIComponents.
Currently I have cloned the UIComponents repo into my project folder and added UIComponents to .gitignore of the root project.
Now I want to build a npm package for UIComponents and I want to be able to switch between npm production build and development.
The problem is in development the import is this:
import Button from './UIComponents'
and with the npm package the import is this:
import Button from '#my_name/UIComponents'
I dont want to adjust the imports everytime.
The first thought that comes to mind is to develop the UIComponents inside node_modules folder but this seems not to be a nice solution.
For solving this, try to use npm link.
So instead of cloning it in a subdirectory that need to be added to gitignore, just check out the repository outside of you project and then link it.
Example:
cd ~/projects/UIComponents
npm link
cd ~/projects/MyApp
npm link #my_name/UIComponents
In this way you can use the same import syntax but you can develop locally in both projects at the same time without the need of publishing every change.
Related
I'm researching options for a new project at work. We're thinking of using nuxt (or just regular vue 3) and creating a library where we will be keeping our shared components.
I'm trying to do the initial setup, but am having problems. I followed this tutorial to create the library and added typescript to it. I created a sample component with a counter and exported it.
The problem is that when I import the component from my library in a consuming project (whether it's the nuxt project or a vanilla vite vue project), the component looks like it's not reactive. Its internal counter is supposed to increase when it's clicked, but it's not updating. There are no errors or warning in the console.
Another issue is that its CSS is not being applied. It has some basic styling defined in the component, but it's not visible. I've created a minimal reproduction repo with setup instructions here: https://github.com/drekembe/vite-reproduction-2342
I've tried searching for similar issues or debugging it myself, but I haven't gotten anywhere.
Any help is greatly appreciated.
I encounter this problem today with my package and finally, I found the real culprit is the node_module inside the package that we tested locally. If you install the local package by npm link or install directly with the folder path like "components": "../components", your node_module will look like:
node_modules
|
--components
|
--node_modules <-- the culprit here
Your package will be shipped with its own node_module and inside that module has a vue package that is independent of the vue package that you are using in your app. So your components would not work as expected.
To test it, just delete the node_modules/components/node_modules and the vite cache node_modules/.vite then run yarn dev again. You will see your component works fine now.
Solution:
In your package folder components run npm pack to pack your package. It will create a tarball for your package. The output is the components-0.0.0.tgz file inside the components folder. This is the most important part because npm pack will create a pack of your package that is similar to what you will publish to the npm registry.
Now in your test project my-vite-app add your package to the package.json: "components": "file:../components/components-0.0.0.tgz"
Run yarn to install the package and yarn dev to run the app and see if your components work.
Every time you make a change on your package, don't forget to pack the package again and re-install it. You might want to increase your package version to invalidate the yarn cache
In your components folder run :
yarn build
then run :
yarn link
in my-vite-app folder run :
yarn link "components"
in the maint.ts import the style :
import { createApp } from 'vue'
import App from './App.vue'
import 'components/dist/style.css'
createApp(App).mount('#app')
I have two separate projects both scaffolded with create-react-app.
First on - UI contains simple ui library. It's just a bunch of simple components with project structure like this:
app
src
CustomButton.js
...
Nothing unusual. Just a bunch of simple react components. And the second one is application itself.
Is it possible to use npm link to add UI project as dependency? I want to be able to import components from UI project like this:
import {CustomButton} from 'UI';
Yes, I do this quite often. From the npm link docs:
Package linking is a two-step process.
First, npm link in a package folder will create a symlink in the global folder {prefix}/lib/node_modules/ that links to the package where the npm link command was executed. It will also link any bins in the package to {prefix}/bin/{name}. Note that npm link uses the global prefix (see npm prefix -g for its value).
Next, in some other location, npm link package-name will create a symbolic link from globally-installed package-name to node_modules/ of the current folder.
Note that package-name is taken from package.json, not from directory name.
Example:
cd ~/projects/my-components-lib # go into the package directory
npm link # creates global link
cd ~/projects/my-app # go into some other package directory.
npm link my-components-lib # link-install the package
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
everything was installed correctly. but whenever I try to create project, it says "'vue' is not recognized as an internal or external command". I installed and re-installed but didn't work. npm was also added to environmental variable path.
C:\Users\touha\Desktop>npm list -g --depth=0
C:\Users\touha\.npm-packages
`-- #vue/cli#3.8.2
C:\Users\touha\Desktop>vue ui
'vue' is not recognized as an internal or external command,
operable program or batch file.
C:\Users\touha\Desktop>
Locate vue.cmd and add its location to your PATH
It is added to package manager(npm or yarn) installation. So you may find it at following locations
YARN
C:\Users{YourAccount}\AppData\Local\Yarn\bin
NPM
C:\Users{YourAccount}\AppData\Roaming\npm
just open PowerShell and run: npm install -g #vue/cli
Addition: If setting the path variable and reinstalling #vue/cli does not work, using the node.js command prompt instead might solve the issue.
It seems vue isn't been installed globally for some reasons.
This is the step I followed to solve mine:
Firstly, create your desired project folder (say "Vue Project"). This is where you want to create a vue project.
Then create a "node_modules" folder in the Vue Project folder
Then go to your system npm folder C:\Users{YourAccount}\AppData\Roaming\npm
You will see three different "vue" files. Copy them and paste in the Vue Project Folder you created.
Go back to C:\Users{YourAccount}\AppData\Roaming\npm and enter the node_modules folder. You'll see a "#vue" folder. Copy this, and paste it in the node_modules folder you created in the Vue Project Folder.
You can now head back to the CLI and create your project using "vue create my-vue-project" where my-vue-project is your desired vue project name.
You can try this way it worked for me
go to the location of your yarn or npm mine is C:\Users\TED\AppData\Local\Yarn\bin for Yarn
C:\Users\TED\AppData\Local\Npm\bin for Npm users
TED will be replaced by your user name
then copy and add it to your system environment variable
Note in case you don't find AppData make sure you have view hidden file checked
I am using Yarn to install #vue/cli.
The way I solve it is via the following steps
Locate your global installed vue.cmd location
Add the vue.cmd directory into System variable Env. For myself, the path is C:\Users{MyAccount}\AppData\Local\Yarn\.bin
what worked for me:
In a powershell :
npm install vue
npm install -g #vue/cli
C:\Users\{USER}\AppData\Roaming\npm\vue.cmd create {NAME}
if you got this error most probably chance package not installed completely
check-in C:\Users\dev\AppData\Roaming\npm
if you had not found the package under this folder then re-run your command
Run command prompt as administrator
Run setx /M path "%path%;%appdata%\npm
Restart the command prompt
Now create the Vue project
In a folder outside of my react native app I have placed a project I cloned from github in order to include it in my project.
I have run npm link on that project and npm linked it to my project, however when trying to run the project I get this screen
The github repository for the project is here
All the file need to be under the root directory of the package. The packager doesnt work well if the files are outside.
A workaround described here
node_modules/react-native/packager/packager.sh --projectRoots <ROOT-1>,<ROOT2>,<ROOT-3>