I'm trying to migrate my vue2 webcomponent to vue3, although the problem comes when i'm creating a build for production.
I was using the vue-cli with --target wc which now displays an error stating that vue3 webcomponent support is still under development.
Removing the --target option my build files are way different, i was relying on the .min files that without this option are not builded.
What alternative I have? Does vite provide the same build outputs that previously vue-cli gave with vue2?
Now -may 2022- the vue-cli-service does not support at all --target wc
In fact in the source code it is completely disabled
if (vueMajor === 3) {
abort(`Vue 3 support of the web component target is still under development.`)
}
Related
We are using webpack to bundle our code package. It is observed that when we build with Vue and Vuetify dependency the output file size increased by 1.5+MB.
How can we tackle this?
Do webpack copy the full code of dependencies in every build?
Since vue/vuetify are also used by other apps, can we build separate package for all dependencies and use them directly?
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)
Third party modules build for 6.0.0.GA are not incompatible with 7.0.0.GA.
When rebuilding for 7.0.0.GA I am getting bellow error.
/Users/dipannita/Documents/Projects/Modules_For_7/Ti-Android-SMSVerification/android/build.xml:55: Cannot find /Users/dipannita/Library/Application Support/Titanium/mobilesdk/osx/7.0.0.GA/module/android/build.xml imported from /Users/dipannita/Documents/Projects/Modules_For_7/Ti-Android-SMSVerification/android/build.xml
How to rebuild modules for 7.0.0.GA using ant?
Have a look at this documentation on how to build modules:
http://docs.appcelerator.com/platform/latest/#!/guide/Android_Module_Upgrade_Guide
And use appc ti build -p android -b instead of the old ant
As per WebStorm they require that we debug against a dist directory as specified in:
https://blog.jetbrains.com/webstorm/2015/09/debugging-webpack-applications-in-webstorm/
however, as per Webpack recommended development process, we should be running webpack-dev-server, so its all in memory as in:
webpack-dev-server –inline –progress –colors –display-error-details –display-cached –hot –port=3000
so there is no dist directory, which contridicts examples posted #: https://blog.jetbrains.com/webstorm/2015/09/debugging-webpack-applications-in-webstorm/
Is there a way to have webpack-dev-server use dist dir so WebStorm can be mapped to it so we can use source maps for live debug?
FYI this is the project I am using to test:
https://github.com/ocombe/ng2-webpack
tx
Sean
Currently WebStorm needs the created Bundle + SourceMap from WebPack to analyze it and find the actual Breakpoint.
So in short, you can't debug WebPack applications just with the WebPack DevServer. However you can run the normal WebPack build with file watching in parallel to it: `
As you know, you will have to create a distribution/production bundle with source maps and then use that for debugging in WebStorm. Personally, I run tests with Karma while I have the webpack-dev-server running. Karma tests can be run with the debugger and that usually satisfies any of my debugging needs, while the webpack-dev-server provides my "manual test" to see how I'm doing.
I guess what I'm saying for your case... you can have the dev server running while, at the same time, having some kind of automated build with source maps running at the exact same time which you can run and use the debugger on. This can be intensive though so it depends on your memory and processing power.
I ended up using live-server https://github.com/tapio/live-server and followed this tutorial, worked... https://blog.jetbrains.com/webstorm/2015/09/debugging-webpack-applications-in-webstorm/ (just can't use the built in server in webpack, but that's ok)
I would add that you can put the statement
debugger;
in your javascript/typescript files even in framework files of angular or vue2 like *.vue
So even if your path mappings to URL don't work, it will step anyway.
I'm brand new to Yeoman and even Gulp. I'm making websites that are very similar between them, so I'm trying to create a custom generator for Yeoman. I've managed to make template html files, and to copy over both files and folders when running the generator.
I made template package.json and gulpfile.js files with dependencies that all projects will be using, such as gulp, gulp-sass, gulp-autoprefixer, etc. My question now is: How do I make the generator automatically install npm and all dependencies when I run it in a new project? Or do I have to run npm install --save-dev *** for each dependency every time I create a new project?
Add the dependencies in the package.json files inside your generator.
For example https://github.com/yeoman/generator-node/blob/master/generators/gulp/index.js#L42 (there's other way to do this too. It depends on your needs)
Then you just call this.installDependencies().
You can also invoke commands:
generator.spawnCommandSync("bower", ["install"]);
generator.spawnCommandSync("npm", ["install"]);