I'm trying to create a compiled an packaged version of my Vue Single File component to distribute and dynamically load it via HTTP.
I found this article from Markus Oberlehner that uses Vue CLI v3 with the following command:
npx vue-cli-service build --target lib --formats umd-min --no-clean --dest server/components/MyComponent --name "MyComponent.[chunkhash]" server/components/MyComponent/MyComponent.vue
It seems to work fine, however, I would like to use Vite instead. Is that possible? Which is the equivalent command?
Author of the original article here.
I recommend you look into Module Federation. When I wrote the original article, it did not exist yet. Nowadays, I'd 100% go for Module Federation instead of rolling my own.
There is also a Vite plugin for it: https://github.com/originjs/vite-plugin-federation
Related
I am working on a vue project that needs to use another private vue project as a dependency. This other private project is a vue plugin.
I have found how to tell yarn to fetch a package on a private gitlab repository by adding the following line in package.json:
"dependencies": {
"myPackage": "git+https://{token-name}:{token}#gitlab.com/path/to/repo.git#someTag"
}
This works well, and the content of my repo is downloaded in my node_modules. However, here comes my problem :
In this repo, the actual vue plugin is not at the root, it's under a subfolder of the repo, meaning the index.js at the root of the repo is not the one from my plugin (and I guess it is the one yarn will be using).
I have a custom yarn deploy script that compiles my plugin into one JS file and put it in a dist folder, however the dist folder is not versioned. I can use the gitlab CI to generate it, but still i'm pretty sure yarn won't use what is inside the dist folder.
My (broad) question is : how can I use the tools at my disposition (yarn, gitlab-ci) to be able to use my private gitlab repository as a vue-plugin for one of my other project ?
You would tell other packages how to use your packages by using the properties of your package.json. For instance, the main declaration
{
main: 'dist/index.js'
}
This tells node how to resolve your module from your package.
so require('my-vue-plugin') or import MyVuePlugin from 'my-vue-plugin' would resolve to node_modules/my-vue-plugin/dist/index.js, for example.
As far as versioning is concerned -- you don't version the file, or the folder. You version through the version property of your package.json and, in your case, through GIT by using git tag -a v(major).(minor).(patch).
The version that you tag should match the version that you specify in package.json.
I would recommend reading more about semantic versioning and creating a script (like VueJS) to auto-increment your package, version and publish.
I have vuejs installed and would like to use vue admin (https://github.com/vue-bulma/vue-admin) with it, however the documentation does not mention how to use it.
For example, if I wanted to use a component from vue-admin then what are the steps?
You'll need to git clone the vue-admin project repository:
git clone https://github.com/vue-bulma/vue-admin.git my-vue-admin
Then:
cd my-vue-admin
Next, install all the dependencies:
npm install
Once all the dependencies are installed, run:
npm run dev
Wait for the compilation to finish then go to http://localhost:8080 in your browser and it should be working.
Using individual components only
If you would like to use some components only, for example: a modal component. Then find its npm package name and install it in your project.
You can either look for the name in package.json or look at the source code of the page using that component in vue-admin. For example, a modal is used here.
Vue-admin is using vue-bulma-modal component. Here is its page which can provide you with more information.
vue-admin is more of a project template, so you'd make a copy of the whole project and make changes as needed. If you want to use individual components, just install them as needed and refer to vue-admin as example
Can I create the navigation-skeleton project using aurelia-cli (v 1.0)?
When I copy the skeleton (also v 1.0) into a folder and then run
au start --watch
I get an error
Cannot read property 'getTaskMetada' of null
I've also tried using the cli to create a new project first, then copying the skeleton over the resulting folder structure - no go.
I'm excited by Aurelia, but still low on the learning curve.
No you cannot. At least the way you are approaching it. The Aurelia-CLI uses requireJS and npm as opposed to JSPM and SystemJS. If you would like, simply run au new from the CLI and follow the project setup and choose yes for install dependencies. You should then be able to copy over the skeletons CSS JS and HTML and mimic the file structure in your new cli project. Once you have paths correct for css and everything it should run just fine. You will see that aurelia.json is the new config.json from the skeletons. Do your bundling and referencing there.
Refer to this on how to properly configure libraries for bundling in aurelia.json and how to refrence css with <require> tags in cli projects.
It sort of is possible using generators like this:
au new # (Select 2 or 3 with typescript)
npm install #generator/skeleton-navigation -D
au generate skeleton-navigation
au run --watch
I get a lot of gulp errors about duplicate identifiers but the app does run.
Be aware though that this generator will overwrite your source code!
Source: https://github.com/aurelia/cli/issues/477
Bower: I couldn't find a Bower package for #Cycle/Core, #Cycle/DOM, do these libraries exist? I'm confused at why there is an NPM package in the first place since Cycle.js is front-end based (and NPM is specialized for back-end only).
ES5: Is it possible to use Cycle.js with Gulp/Typescript/ES5 (and not use Browserify/webpack)?
npm is not specialized for back-end only. It is for everything.1
It is possible to use Cycle.js without browserify or webpack. The library comes with ES5 distribution files, found in the dist directory.
Yes, you can use Gulp, TypeScript and ES5 with Cycle.js.
Everything Frederik said, plus here is a standalone Cycle.js example on codepen. You can see the links to the JavaScript files being loaded by clicking on Settings, then JavaScript. Here they are for convenience:
https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.0.7/rx.all.js
https://rawgit.com/cyclejs/cycle-core/master/dist/cycle.js
https://rawgit.com/cyclejs/cycle-dom/master/dist/cycle-dom.js
Full example is on codepen
Or you can try stealjs.
At runtime it downloads your dependencies.
I use npm to get the packages, gulp to move the packages to wwwroot. TypeScript to downcompile, and systemjs to load the modules. No webpack or bower required.
I know browserify can consume UMD modules by means of transforms, but when I want to build a lib using browserify, how can I build an UMD module? Is there any transform I can use?
If you want to build a UMD module with browserify use the standalone option. Like:
browserify('./entry.js', {
standalone: 'moduleName',
})
From the CLI: browserify -s NameOfModule
This creates a standalone module exposed under the name of your choosing.
Utilize by loading the output file in a browser and access via window.NameOfModule, or see RequireJS docs on how to use it that way.