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.
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 been wondering this for a while and i haven't found a specific answer.
I am building a whole app using Electron and React to make the ui.
My question is if i should have a 2 complete different source code for each part of the app (electron and react) because i don't know very wekk how the package electron-builder works.
To be precise, since i have installed react (and react packages related) and some others that i just use for the ui part, when i build the app for distribution, will electron include the dependencies that doesn't require? Making the final bundle bigger!
While electron-builder has configuration options to specify which files are to be included, it is not a replacement for a tool like webpack.
electron-builder creates the installer/target artefact for your platform and packs the files you have specified.
It does not sift through your node_modules via tree shaking to create a minified script that only contains the code you need.
You can compare it a with the files array in the package.json that tells npm pack which files should be put into the tarball.
In the default configuration (and I don't know if you can overwrite that, but it is surely worth a try by setting specific node modules to ignore) it will include the entire production dependencies.
Another solution than manually ignoring the react dependencies would be to hold your react app in its own directory in your project and only include the build artefact.
gui/
|_build/
|_your built stuff
|_your react stuff
|_node_modules
|_package.json
main.js
node_modules
package.json
In this case you would configure electron-builder to include main.js and gui/build. With this electron-builder should only include the production dependencies of the outer project.
I'm working on an ejected React application that uses webpack.DefinePlugin to store globally an object defining the folder names in the application for a specific path (kind of an ls in shell but using node fs)
I'm researching how to go back to the original create-react-app without loosing this functionality as some parts of the app relies on this, but I can't find anything other than a script that writes these names into a variable in js file prior to the commands npm start or npm run build.
The project is currently using Webpack 3 and Babel 6, the idea behind going back to react-scripts is get rid of the manual maintenance and simplify the project dependencies while upgrading the project
// analysis.js
module.exports = {
key: values from fs node package
};
// WEBPACK
new webpack.DefinePlugin({
"ANALYSIS": JSON.stringify(require('./analysis')),
}),
I expect the same values to be available in the application without needing to eject react-scripts
Any suggestions? Thanks!
I finally chose to develop a script that runs before any webpack script and creates the file that I import later like any other file inside the React app
Regards
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
I have several ReactJS projects and I am starting to have a lot of reusable components. I do not want to publish them to npm or have them mixed with the imported node_modules directory at the root of my project. Where should they go?
My projects look like this:
project1/
node_modules/
src/
index.js
A.jsx
project2/
node_modules/
src/
index.js
A.jsx
A.jsx defines a reusable component and I'm just copying the file everywhere... I would like to have it in one place only and my projects use it with import A from 'A'.
I have tried to make symlinks to A.jsx in src/ or in node_modules/ but that won't compile, like react-scripts can't handle them. How have you worked around this? Thanks for your help!
I do not want them mixed with the imported node_modules
Why not? Extracting your reusable components into their own library it's the best way to make them reusable. Once they are extracted, you can compose your projects by importing only what you need. You can also write their own tests without running the tests of an entire project. And finally you can handle different versions of the components independently of the projects.
I have tried to make symlinks to A.jsx in src/ or in node_modules/ but…
Symlinking files from one project to another one could be a good idea, but you are creating dependencies between your projects instead of creating dependencies between your projects and your components library. If you want to deploy project B that uses a component from project A, you will need to deploy both projects and recreate the symlink on the server. Also, project A is probably a bigger dependency (with its own dependencies) than a simple components library.
I do not want to publish them to npm
If you don't want to publish your components on NPM (I don't do neither), I'd still suggest you to extract your components into their own repository (GitLab has free private repositories).
Then you can install the library directly from the repository like this:
npm install git+ssh://git#git.mydomain.com:Username/Repository-name
It will create an entry in your package.json:
"Repository-name": "git+ssh://git#git.mydomain.com:Username/Repository-name"
Then you can import your reusable components:
import { ComponentA, ComponentB } from 'Repository-name'