I just created my first Vue app with the Vite bundler. I'm used to creating Vue projects with the Webpack bundler & Vue CLI where you can generate the VueX and Vue Router folders and files out of the box. When I create the Vue app with Vite I only get the minimal folder structure.
Is there a way to generate the VueX and the Vue Router Files automatically with Vite?
Vue CLI is a project generation framework which configures build tools and makes it easy to install libraries.
Vite is just a build tool.
You need to set everything up from scratch, or use a template eg: https://github.com/antfu/vitesse
Related
I'm developing a micro frontend architecture using module federation in Webpack in order to develop and deploy all parts of my web application separately. Everything sounds great but the problem is all remote modules should be specified explicitly in the Webpack configuration file. I need something like /plugins in the root directory of my built project And I want to import All .js files in that directory and render all of them in my react project.
Is there a way to implement a plugin system for react components using Webpack? Is there any way at all to achieve this goal?
In How do I dynamically load a YAML file as an object in a VuePress Vue Component? I created a Vue Component that renders Swagger but requires a YAML loader configured which is done in a plugin.
I want to package this as a single npm package that can be embedded but I can't find it in the docs
I would like to make a new ReactJS component with Typescript and publish it on npm.
My idea is to have only a project folder with:
/dist build for final distribution on npm
node_modules
/public where I will have my index.js to locally run my app for development purposes and one folder components where all files for my distributed component will be stored (only component folder will be published)
and other files like .gitignore, .npmignore, package.json and so on..
Something like this:
I have seen many guides (and spent many hours) figuring out how to publish a ReactJS component like:
Create an NPM Package from a React Component
Create a React Component Library using TypeScript
How To Make a React Component Library - Making A React Library
Publish A React Component On NPM
create-react-library
But most of them have such a complicated structure (like script files, babel files, webpacks ..) and generated files that I don't understand.
My idea was to use react-script to run and develop the app locally and then run tsc to compile my component to build. I thought that I don't need create-react-app/library, babel or webpack to publish a react component - if they are necessary, why do we need them? I just thought it should be possible to do it simply and lightly - like just to take tsx files compile them into js..
To me, it seems that the process of publishing a ReactJS component library with TS to npm is not that well documented. Can you please provide steps or some well and easy-to-understand guide on how to publish react component? Also with all the configurations (configuration files), since I think I messed it somewhere there.
Thanks in advance!
My team and I have built out the frontend of an application which is due to be handed over to a backend team that will integrate the components we created in to their own Vue Cli app.
We felt it would be "cleaner" to somehow setup the Vue Cli project we have as some kind of dependency to their own Vue Cli app instead of their team tearing our components out manually (we want a single-source of truth). Is this at all possible?
I had a look at build targets in Vue Cli but it feels like the wrong approach for us:
https://cli.vuejs.org/guide/build-targets.html
i.e. vue-cli-service build --target lib
Ideally, we want them to be able to import components directly from our project on-demand and not as one single/bundled JavaScript file as Vue's --target lib seems to produce.
Any guidance on the best approach for this would be greatly appreciated. Thanks!
I want to create a java-script library file that contains a few React components I composed and I used "create-react-app my-app --scripts-version=react-scripts-ts" command with npm to create the project (link).
I want to pack/bundle this project (Webpack) without having any html file.. only components so I can take the output js file, include it in another project and use its components.
I tried looking for some Webpack configuration but all I find is not sutiable for TypeScript project.
Can you help me configuring Webpack?