I'm trying to build a component using:
vue-cli-service build --target wc --name my-component ./src/App.vue
The outputted build js still has const and arrow functions. How can I have it transpile to commonjs for example?
I've tried using various presets in the babel config but the build result is still the same.
There is a babel.config.js file in project root (generated from vue-cli)
module.exports = {
presets: [
'#vue/app'
]
}
No errors, the build is occurring but it is not transpiling. It's almost as if the babel config is bypassed when building with target wc
A default Vue CLI project uses #vue/babel-preset-app, which uses
#babel/preset-env and the browserslist config to determine the
Polyfills needed for your project.
By default, it passes useBuiltIns: 'usage' to #babel/preset-env which
automatically detects the polyfills needed based on the language
features used in your source code. This ensures only the minimum
amount of polyfills are included in your final bundle. However, this
also means if one of your dependencies has specific requirements on
polyfills, by default Babel won't be able to detect it.
When using Vue CLI to build a library or Web Components, it is
recommended to pass useBuiltIns: false to #vue/babel-preset-app to
disable automatic polyfill injection. This ensures you don't include
unnecessary polyfills in your code, as it should be the responsibility
of the consuming app to include polyfills.
To build for CommonJS use target --library:
vue-cli-service build --target lib --name myLib [entry]
Build Targets
Related
I have a project with two packages:
components/
apps/
Both are built using #vue/cli, and I'm using yarn workspaces to manage dependencies.
Everything is working, except Hot Module Replacement when running the app.
components/package.json: main: dist/components.umd.js
app/package.json: components are a dependency, I import like import MyComponent from 'components'
In dev mode I run two tasks in parallel:
components: vue-cli-service build --target lib --watch
app: vue-cli-service serve
I want to change MyComponent in components/src/ and have it hot reload in the dev server.
However, I can only see the changes when I refresh the page.
I know the Vue cli splits source and vendor js bundles, so I thought this may be the cause of the problem?
Does anyone have any suggestions?
I am quite unfamiliar with npm, (I develop in python) and most of the time I just do what the tutorial says. But now I am stuck. I tried Tailwindcss in combination wit 'Vue 3' and followed the install steps from the website:website tailwind+Vue 3
npm init #vitejs/app my-project
cd my-project
npm install
npm install -D tailwindcss#latest postcss#latest autoprefixer#latest
npx tailwindcss init -p
And after adding some HTML and running:
npm run dev
everything works fine in the browser.
But then Iwant to build it for using in production I use
npm run build
and after some processing my dist folder is filled with an index.html and assets.
And here starts my problem. I was expecting that I could copy these files to my server and that it should serve my site. But All I see is a blank page.
I can't find the answer anywhere or others with same problems so I think its something stupid I just don't know. But what is it?
Hope someone can help me...
Try this, maybe something will work
https://dev.to/vonagedev/using-tailwind-css-with-vue-js-b1b
Webpack (and Vue-loader which is a Webpack loader for Vue.js components) can be configured to use PostCSS which is a Webpack loader for CSS.
It will look for the configuration inside a postcss.config.js file and can build the app with CSS from packages you add.
And, configure it using this code.
// postcss.config.js
const autoprefixer = require('autoprefixer');
const tailwindcss = require('tailwindcss');
module.exports = {
plugins: [
tailwindcss,
autoprefixer,
],
};
The demo app is also generated without any CSS assets. Instead, it uses CSS inside the components (which is fine). To include Tailwind CSS, create a CSS asset using your editor or the commands below.
# mkdir -p for making parents they don't exist
mkdir -p src/assets/styles/
touch src/assets/styles/index.css
Now add this code, which adds the various packages of the Tailwind CSS library.
/* src/assets/styles/index.css */
#tailwind base;
#tailwind components;
#tailwind utilities;
```
I create a custom library through VueCLI. I would like to reduce the size of the build by not including vuetify and vue.js in the final bundle.
My final build file (*.umd.min.js) works correctly when building with command:
vue-cli-service build --inline-vue --target lib --formats umd-min ./src/components/Component.vue
If I externalize vuetify and vue.js, then when I connect the library I get error:
Cannot read property 'extend' of undefined in the vuetify library
How to remove vuetify and vue.js from the build?
I use build command:
vue-cli-service build --target lib --formats umd-min ./src/components/Component.vue
And registered vuetify components globally in core app.
I was able to do this using roll up as described in the guide here.
https://blog.harveydelaney.com/creating-your-own-vue-component-library/
The key is to make sure vuetify is listed in peerDependencies in your package.json.
You can use
configureWebpack: {
resolve: {
symlinks: false,
alias: {
vue$: path.resolve(__dirname, 'node_modules/vue/dist/vue.runtime.esm.js')
}
}
},
in your vue.config.js of the App using the library.
I've used Vue for some time now, but I'm just getting started with the CLI and I got a bit confused.
I installed #vue/cli and if I type vue in the command line, I get:
Usage: vue <command> [options]
Options:
-V, --version output the version number
-h, --help output usage information
Commands:
create [options] <app-name> create a new project powered by vue-cli-service
add [options] <plugin> [pluginOptions] install a plugin and invoke its generator in an already created project
invoke [options] <plugin> [pluginOptions] invoke the generator of a plugin in an already created project
inspect [options] [paths...] inspect the webpack config in a project with vue-cli-service
serve [options] [entry] serve a .js or .vue file in development mode with zero config
build [options] [entry] build a .js or .vue file in production mode with zero config
ui [options] start and open the vue-cli ui
init [options] <template> <app-name> generate a project from a remote template (legacy API, requires #vue/cli-init)
config [options] [value] inspect and modify the config
upgrade [semverLevel] upgrade vue cli service / plugins (default semverLevel: minor)
info print debugging information about your environment
Run vue <command> --help for detailed usage of given command.
I created a project with vue and I needed to install #vue/cli-service-global for some reason that I can't remember.
After that, however, I noticed:
'vue-cli-service' is not recognized as an internal or external command
And that's because I had to install #vue/cli-service. Now, when I type vue-cli-service in the command line, I get:
Usage: vue-cli-service <command> [options]
Commands:
serve start development server
build build for production
inspect inspect internal webpack config
run vue-cli-service help [command] for usage of a specific command.
Apparently, I can build, serve, and inspect with both CLI tools. My question is - what's the difference between them? Both the readme of #vue/cli and #vue/cli-service have nothing but a link to this page where no answer is given to that question.
What can I do with one that I can't do with the other? Do I need both?
#vue/cli-service-global is a package that allows you to run vue serve and vue build without any local dependencies.
#vue/cli-service is a package that actually doing those vue serve and vue build, both #vue/cli-service-global and #vue/cli depend on it.
If you're using #vue/cli then you don't need to install another two independently, since it already has #vue/cli-service in its dependencies.
Added: Just to be sure, I'll explain it more:
#vue/cli:
add, create, config, ui and other commands
build and serve commands through #vue/cli-service-global package
inspect command through #vue/cli-service package (local dependency)
#vue/cli-service-global:
build, inspect and serve commands through #vue/cli-service package
#vue/cli-service:
build, inspect and serve commands
So, you need to install #vue/cli only and remove other two.
Added: Clarification about using vue-cli-service:
When you create a project using vue create command, #vue/cli makes a link to vue-cli-service binary inside ./node_modules/.bin of created project.
Then you can use it like this:
Access it directly as vue-cli-service inside npm scripts (package.json):
"scripts": {
"watch": "vue-cli-service build --watch"
}
Access it from the shell: ./node_modules/.bin/vue-cli-service build --watch.
You can even add ./node_modules/.bin to you shell PATH and access it from the shell directly as vue-cli-service.
In my front-end code, I use require() to pull in libraries which, in turn, depend on different versions of Underscore.js. As a result, when I use browserify to bundle everything together, the output contains multiple copies of Underscore. Is there a way to tell browserify that require('underscore') should always import a particular file?
As a demonstration of the problem, imagine I have the following dependencies:
// package.json
"dependencies": {
// Depends on underscore 1.7.0
"backbone": "^1.1.2",
// Depends on underscore 1.6.0
"backbone.marionette": "^2.3.0"
}
In main.js I use both libraries:
// main.js
var Backbone = require('backbone');
var Marionette = require('backbone.marionette');
console.log("Hello, world!");
When I create a bundle, multiple versions of Underscore are included:
PS> browserify main.js -o out.js
PS> findstr _.VERSION out.js
_.VERSION = '1.7.0';
_.VERSION = '1.6.0';
(I created a GitHub repository with a more complete example. Clone it and run npm install && npm test to see it in action)
I tried adding a browser section to my package.json like the following, but it didn't seem to have any effect:
// package.json
"browser": {
"underscore": "./node_modules/underscore/underscore.js"
}
I understand why npm installs duplicate dependencies (and it makes sense to do it this way for server-side code) but what's the correct way to deal with this when using browserify?
There is a duplicate detection in Browserify that should avoid loading the same version more than once. However, if your node_modules tree contains multiple copies of the same module, this detection might (should?) fail.
The solution that I'm using is to dedupe the package structure with npm:
npm dedupe
This will only leave unavoidable dupes in your dependency tree and it will log a warning about those dupes so that you can double check.