I want to build a custom web component by Stenciljs and use it in Vue3. The following repo contains the source code of web-component. github-source-code.
For this purpose, I run the command 'npm run build'. It generates dist and www folders. Which of them must be used in a Vue3 app?. And what is the best practice for this apporach?
Related
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!
All my VueJS projects use at the beginning the same baseline :
Vuex
Vue Router
Immutable.js
MathJS
MomentJs
ChartJS
Plus, all my projects have quite the same "index.js" file.
Is there a way to have a command line (preferably based on Vue CLI) that can generate a project with a pre-coded "index.js" file and a package.json with those above dependencies ?
It sounds like you are wanting to use the Vue CLI to create a project. However, you additionally want some default npm packages to be installed and imported into your index.js file.
Answer: no. this functionality does not exist (currently)
Some Suggestions:
Open a feature request here. If you did do a feature request, you should descibe it in a more general way. For example 'allow the ability to specify npm packages on project creation' opposed to specifically installing ChartJS, Moment and the other ones. That's too specific, that will get shot down and closed in a heart beat.
Create a repo with the project structure and packages you want and always start from that repo (opposed to using vue cli)
Write your own custom node cli to interface with vue cli that handels your extra steps for you. You could easily write a node (console program) that executes the steps you want. Basically, create the vue project, npm install what you need, generate an index.js with your package imports.
I think the easiest route is to just create an empty vue project how you want it. Save that repo as 'vue-boilerplate' or something and just always start off with that empty project opposed to doing vue create every time.
In my personal opinion, I think going through all this to npm install 3 packages and add the imports to a js file isn't entirely worth it unless you find yourself creating a massive amount of projects that will all require the exact same setup.
Angular has a similar idea called schematics but I do not see an equivilant within Vue as of yet.
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?
I need to develop multiple apps.
Each app has the same codebase. A json file defines which feature/class/controller have to be used for different app.
Now, I have a build task for each app.
I would like to be able to run a npm task and give to the task the json file.
I'm using webpack 4
I want to have some example sites in my web framework package. The sites run ok if I just want to run them as dart only implementations, but if I want to compile them to javascript I currently copy the sub folder out from my packages /example directory and into a new packages folders /web directory, as I only know how to get dart build to compile the client side code to javascript if its in the web directory. Is there anyway of telling dart build to run in a different root folder? like pkgRoot/example/example_1?
pub build example works fine for me but not yet for Polymer projects (this is work in progress)
Polymer doesn't like when it has a transformer configuration in the package where elements are imported from.
I maintain two polymer elements packages (polymer_elements/polymer_ui_elements).
I have the example files in example but use another package (e.g. polymer_elements_examples) to build the examples to JavaScript.
This polymer_elements_examples has a pubspec.yaml file with a dependency to polymer_elements, a transformer configuration for the entry pages, and example as a symbolic link to polymer_elements_examples
I then build the examples in polymer_elements_examples with pub build example.