I want to setup a project with the beta version of vuejs3 that is available now. I would like to compile it into es modules, therefore I cannot use webpack.
Are there any seed projects/guides available that setup vue3 with rollup to emit an es module bundle.
If you have a chance, check out vuejs/vite at https://github.com/vuejs/vite
This server allows you to build single file components. But it also uses rollup, so seeing the code may also be helpful.
the interesting bits are here https://github.com/vuejs/vite/blob/19f8358a47251b35557f4c2bdd8a3ac2b7ef96c0/src/node/build/index.ts#L179
but the important part is the vue-3 friendly rollup plugin "rollup-plugin-vue": "^6.0.0-alpha.8"
I have created this seed project setup for rollup + vue3: https://github.com/gautam1168/rollup-vue-next
For step-by-step creation of this seed project see here: https://gautam1168.com/posts/rollup-vue-3/
Related
For the past 2 days I've been trying to include a non-exporting js library into my vue project and it seems to fail every time. The closest I've got to a working thing is with import *. It recognizes the commands in the library, but when I try to use them, it gives me an error that says:
the namespace is undefined
My question is - what is the best way to include a non-exporting (legacy) js library in a vue project?
import * as test from "library.js"
The webpack compiler can understand modules written as ES2015
modules, CommonJS or AMD. However, some third party libraries may
expect global dependencies (e.g. $ for jQuery). The libraries
might also create globals which need to be exported. These "broken
modules" are one instance where shimming comes into play.
Reference.
import './path/to/library.js'
When using the ui you have the option of installing dependencies and plugins.
I am confused about the difference between both of these.
For instance, I can install axios as a dependency and a plugin.
Do I need to do both? Why do one over the other?
My current understanding is that dependency is just that, it adds a package to your project while a plugin will add configuration as well.
Am I correct in thinking that?
A plugin is exactly what you described. It 'plugs into' another piece of software and adds functionality. A dependency on the other hand means that your software simply depends on something to function correctly - usually code.
In your axios example:
The axios plugin installs another prototype property on your Vue instance (this.$axios.. or whatever it is called) so it definitely adds a feature to Vue.
You could also only use Axios by itself and import it in the files you need
import axios from 'axios'. You don't add any feature to Vue itself - you just use another software within your app. Axios here is a dependency.
I will probably not be completely correct, but my understanding is
Plugins vs Dependencies
Command line
dependencies are installed via the command line as npm install <name> or npm install --save <name> to add the dependency to package.json
plugins are installed via the command line as vue add #scope/vue-cli-plugin-<name> or with the shorthand vue add #scope/<name>
Installation
dependencies are placed into your projects node_modules folder
plugins will invoke the generator.js script of the plugin being installed. This generator.js may add dependencies to package.json, add import statements to files in your project, add/alter existing components, or any of the various things listed under the generator api docs
Usage
dependencies will need to be imported into any file you use them in, or imported globally, before they are able to be used
plugins often will have already set up global imports, making them available in every file. Plugins will also often add additional scripts to package.json (which show up as tasks in the vue ui)
My web app does not work on ie11 because of ipfs-api.
This module uses ES6 and has not been transpiled.
Some dependencies are not transpiled, too.
And some dependencies of those dependencies are not transpiled, and so on...
How can I transpile ipfs-api and related modules?
I think the simplest way is to use babel-register here.
Just add something like this at the start of your entrypoint:
require("babel-register")({
only: /node_modules\/package-name/
});
Keep in mind it would bring the whole babel runtime at the start of application, which can increase application's start up time.
lodash supports custom builds with only a subset of the functionality / size. Creating a custom build is a breeze with lodash-cli.
What's the recommended way to take this custom build and integrate it into the project? (using npm / browserify).
Do I create a custom build command that creates the custom build and places it somewhere? (where?)
Is there a canonical way to specify the dependency and integrate into the project?
There are several approaches you can take to use a subset of lodash:
Use the CLI to generate a custom build (a file within your projects codebase) of the features you need
Use npm modules or the lodash modules within your code base (i.e. instead of doing _ = require('lodash'); _.each(...) you would do each = require('lodash/collections/each'))
Use the lodash-modularize tool to create and maintain a custom lodash build for a given project and use lodash as otherwise documented. This is essentially automating the two/three methods above.
Each approach is 100% valid and has their pros and cons
Disclaimer, I'm the author of lodash-modularize
I use node.js connect/express.
Does anyone know an assets manager that supports on the fly compilation and minification of TypeScript source code?
Any idea how to call the compiler programmatically?
I've been using connect-assets which is build on top of Snockets. Shouldn't be that hard to implement once I figure how to compile a .ts resource.
From reading through the tsc.js code, it looks like there's a TypeScript.TypeScriptCompiler(outfile, errout, new TypeScript.NullLogger(), this.compilationSettings); function you could hook into. The code is on Codeplex, under an Apache license, and it's modular. Since TypeScript can be compiled to target CommonJS modules, it should be fairly straightforward to hack it into express.
Not a complete answer yet, but I found this project: which exposes the TypeScript compiler.
https://bitbucket.org/nxt/node-typescript-wrapper