Im using element UI and I'm installing it just like this
npm i element-ui -S
however i dont want the whole package instead i just want a specific component which is the DatePicker how can I install it using npm. I tried looking in documentation but it is nowhere to be found thanks.
Using npm (or even Yarn), you can only install an entire package and all of it's dependencies. Installing specific parts of a package isn't a thing; more docs can be found here. Once again, even the docs for element-ui makes it quite clear that installing the package can only be done through
npm i element-ui -S
or if you're using yarn, yarn install 'ing after adding the package to your package.json.
Now, if you're wondering if it's possible to only include the component you want in the output bundle of your Vue app, then the answer is yes. You'll need to ensure that you're importing only the full path of the component (as opposed to the entire package):
import ElementUI from 'element-ui'; // will import the whole library
OR
import { DatePicker } from 'element-ui/lib/Datepicker' // will import only the Datepicker
You'll need to ensure that the path you're importing the component from matches that of the installed package location within your node_modules directory. As well, you'll then need to make sure that your Webpack config is setup correctly to bundle only the JS files you're importing (which should be handled by default).
I think there is no way to only install one single component from a ui library.
Because there has a lot of dependency between each component in the source code.
But if you are worry about it's to heavy to import the whole library into your project.
Maybe the best way is import the library on demand like below:
import Vue from 'vue'
import { DatePicker } from 'element-ui'
Vue.use(DatePicker)
When using it with webpack and babel-plugin-component.
Your bundle output will only include code from the library which is actually useful.
You can see the detail document here Element QuickStart.(Ps: the On demand section)
Or you can discard to use ElementUI.
And choose another DatePicker Component for Vue from this site Awesome Vue
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')
Long story short, I am currently creating an npm package for React Native that is dependent on other packages that are native and require linking, pod install, etc.
I am currently using peerDependencies to make it work but I would like to include everything in the package for people to enjoy an easy installation process instead of manually installing 3-6 dependencies themselves.
I am not sure where to start about that or if it's even possible, any thoughts are appreciated.
I think the first think you should check is this library. It's actually recommended by the official React Native documentation.
You can create basic bootstrap for your npm package with this command (check the link above to RN docs for more information):
npx create-react-native-library react-native-awesome-module
if you wanna use a native package then you will need for
IOS
you will need to add s.dependency in react-native-pkgname.podspec REF
Android
you will need to add implementation in android/build.gradle file REF
To make new package, you can use this CLI
https://github.com/callstack/react-native-builder-bob
npx create-react-native-library react-native-awesome-module
I have been coding with a React frontend and a Node/Express backend. But sometimes, I only need some plain Javascript without React, but still want the benefit of NPM and other Node modules. What is a way to do this?
You'll need a module bundler of some kind. There are many options including Webpack, Browserify, Gulp, and Parcel.
For Webpack, for example, from their example docs, the process could be:
Install webpack with npm install webpack and install webpack-cli
Install a module you want to use on the frontend, eg lodash
In src/index.js, import lodash: import _ from 'lodash'; and use it as needed. (You can also import other modules from NPM or from other places in your source code)
Set up webpack.config.js if you need custom build configuration settings
Run webpack to build the project: npx webpack. A single bundled JavaScript file will be created which contains all your source code and the imported Lodash's source code.
I create a project with create-react-app and do many staff on my office. On my imports im using no relative path on folders:
project-folder
src
components
reducer
On my reducer folder i made a import like this:
import componentX from "components/mycommponent/componentX"
and on my office, works without problem.
On my home, i just download the project do 'npm install' a try to run the project
and the same file don't find the componentX and i don´t know why. I have several imports on that project and, if possible, don't want to change all my imports.
Can you guy know why this happen?
At the root of the project create a .env file... To that file add NODE_PATH=src/
Now you do not need to use relative imports... (Note: since I don't know the exact directory structure of your project use some common sense and adapt the solution to your specific situation)
My guess would be that said .env file is probably in the .gitignore and you didn't get it when cloning the repo...
In case error or missing component is of some node package the you most probably for got to add --save with package install and you package json is not updated.
then you can check by ls node_modules and check for missing dep in package json.
In other case like error is from your code you have to share error and some code.
In case of any query ping me or update you question.
I will update my ans.
I'm developing a react component, and it depends on an ES6 component I'm also developing which I wrote first.
What's the normal way to include this at dev time while I'm working on the second component. Obviously, if the dependancy was in NPM it would be in my node_modules and I'd just import it.
I don't want to reference it by path as I'd have to remove that path every time I commit or publish.
Is there anything that would watch for changes in Module A and update the dependancy version in Module B?
Are your React component and ES6 component separate modules?
If so, you can use npm link.
First, go to your ES6 component's directory and run npm link. This will set up a symlink in your Node packages to the local version of your component.
Then, go into your React component directory and run npm link <es6-component-name>. This will create a symlink in your node_modules to the linked version of your ES6 component.
This only works for local development, obviously. If you want to distribute your React component and have it depend on your ES6 component separately, you'll need to publish them to NPM separately and add one as a dependency of the other.