I am trying to reduce the size of my SPA build, which gets build using vue-cli build. I am using Chart.js and after building the application, I ran webpack-bundle-analyzer and it shows Chart.js with it's full size, and not chart.min.js.
What I am expecting is that it would use /dist/chart.min.js. I am not understanding this correctly, or is it actually using the non-minified file?
I got around to having another look at this and this is simply because vue-chartjs needs chart.js as peer dependency and is thus not taking care of anything in my side of the build step.
Related: https://github.com/apertureless/vue-chartjs/issues/249
The fix is to configure it accordingly in the webpack config:
resolve: {
alias: {
'chart.js$': 'chart.js/dist/Chart.min.js',
},
},
Related
I'm trying to build a library (mostly some .vue components) to reuse in different projects (no public npm) with vue-cli-service. Apparently everything its already setup, and I can confirm that the build is fine (js, and css). However, I'm unable to use it in a separate project as an external module because it uses the spread operator (and probably more ES20XX features no yet parsed).
Module parse failed: Unexpected token (2683:8)
You may need an appropriate loader to handle this file type.
| params() {
| const queryParams = {
| ...this.filters,
| ...this.sorting,
| ...this.config.params,
This is the standard command I'm using to build the library
vue-cli-service build --target lib --name [mylibname] ./src/components/index.js
By default the bundle should be already polyfilled but it seems to me that it's not the case.
I've read that I might change the webpack configuration on the project I'm using into, but I'm against parsing the whole node_module folder and also I would love to just have the simplest workflow possible (like import a module and its css).
So my question is, how to polyfill my bundle to be perfectly usable in no matter what Vue project without any hassle ?
Ok, it seems that reinitializing the project with vue-cli without typescript and with separated configuration files instead of into package.json was a good idea, as now is transpiled as needed.
var queryParams = _objectSpread({}, this.filters, {}, this.sorting, {}, this.config.params);
Unfortunately the hidden configuration of vue-cli webpack can't help to see what has changed.
I'm working on putting together a small app using vue, and I specifically need it to run on a device that does not support ES6. I'm using vue-cli-service build to build, and when trying to open this page on my ES5 device, I'm seeing this error SyntaxError: Unexpected token '...'. Expected a property name.
I have installed babel, and added this to my .babelrc: { "presets": ["#babel/preset-env"] }
I'm not really sure what else to try, I haven't been able to find anything that specifically addresses this. Even the vue-cli-service documentation suggests ways to support polyfill for ES5, but I don't think this is the same thing.
I had this problem with Vuetify and Safari 11.1
I guessed I needed to transpile the ES6 version of Vuetify for older browsers. The solution was difficult to search for, as most of the suggestions were about modifying webpack or babel configuration, which I find obscured inside Vue CLI.
I eventually uncovered the solution myself by rebuilding my project from scratch via Vue CLI, and the installer magically added a transpilation option for Vuetify which I was missing - I think because I had previously upgraded Vuetify across the ES5 to ES6 versions, and perhaps their upgrade script doesn't perform this step.
vue.config.js
module.exports = {
"transpileDependencies": [
"vuetify"
],}
this is the equivalent of webpack
build: {
transpile: ['vuetify']
}
Restart the build and reload.
Of course you will need to find which of your packages it is - this is just an example. I just dug around in the error stack until finding something which belonged to Vuetify.
I have set up a basic webpack/babel/mocha project just for playing around. Now I installed jQuery and Paper.js to my project with Bower, but I want them to be bundled with webpack on npm start, I don't want to write extra <script> tags etc.
I just want to use them as import $ jQuery from 'jquery'. But now my setup looks for the jquery package in npm_modules. How can I tell npm to look for these in the bower_components folder?
Is this a logical decision tho? Or am I supposed to set up this any other way?
Personally, I'd usually recommend installing everything through NPM - most frontend dependencies are on there these days. However, it does say on the Paper.js NPM page that they recommend using Bower to download the browser version of the library (perhaps there's some Node-specific code in the NPM package? I'm not sure).
To get Webpack working with Bower packages, you can set a custom name/path using config.resolve.alias:
var path = require("path");
var config = {
...
resolve: {
alias: {
"jquery": path.resolve(__dirname, "path/to/bower/file"),
"paper": path.resolve(__dirname, "path/to/bower/file")
}
}
...
}
This can come in handy in quite a few situations outside of Bower, too - for example, if you need to use a library that isn't currently distributed through a package manager, you can just add it to your project folder and use an alias to make it available to your code.
I have been fighting with this trying to find a solution and trying solutions left and right, and I can't seem to figure this one out.
With React Native we have .ios and .android file extensions. Each of which the React Native packager will handle for us. Now, I'm using webpack (because I love to torture myself) and I cannot get it to resolve the filename extensions properly. Using the React Native Webpack Server (which there seemed to be no solution for this), it returns an error that looks similar to this:
This is due to there being a .ios and .android file being called as: require('Spinner'); The React Native packager will resolve these files, webpack will not. I need to mix these two to get this to work, or is there now a magical solution to where I don't have to use webpack at all anymore.
I think I'm getting my point across with this alone, and wondered if there is a webpack extension or a resolve alias I can use to fix this issue. If needed I will post my webpack setup here.
Let me share my inspiration :)
You can split webpack config into two configs with single entry point in each. Then specify .ios.js and .android.js extensions in resolve section:
entry: {
'index.ios': ['./src/main.ios.js']
},
...
resolve: {
extensions: ['', '.js', '.ios.js', ...] // '.android.js' will be in other config
}
Or you can write own loader, but it needs more inspiration.
I'm trying to refactor a library that uses Browserify by shimming certain modules out of the bundle using browserify-shim. Specifically, the library uses require("codemirror") but I want to provide a bundle that doesn't include CodeMirror but will rather use one that is provided via CDN.
So I've got browserify-shim config in my package.json like
"browserify-shim": {
"jquery": "global:jQuery",
"codemirror": "global:CodeMirror"
}
So far so good. require('jquery') and require('codemirror') have disappeared from the browserified bundle and been replaced by the expected code snippet to grab jQuery and CodeMirror off of the window object.
The library also requires some CodeMirror add-ons. For example require('codemirror/addon/hint/show-hint.js'). That's fine. I want that add-on bundled. However, within this add-on is a UMD wrapper that includes require("../../lib/codemirror"). Browserify is seeing this and is bundling the CodeMirror from /node_modules/codemirror/lib/codemirror.js because of this (I think). I want this to use window.CodeMirror as defined in the codemirror shim instead, but cannot figure it out. Have tried many variations including the following:
"browserify-shim": {
"jquery": "global:jQuery",
"codemirror": "global:CodeMirror",
"../../lib/codemirror": "global:CodeMirror",
"codemirror/addon/hint/show-hint.js": {
"exports":null,
"depends":["../../lib/codemirror:CodeMirror"]
}
}
That require("../../lib/codemirror") will not go away! I'm sure I'm missing something.
I'm running this from a Gulp script, but I don't think that should make any difference. Browserify version 3.38.1. Browserify-shim version 3.7.0.
Any ideas?
If you add browserify-shim with {global: true}, it should be applied to your dependencies' dependencies (and so on) as well, which should hopefully do what you want.
Assuming you're using raw browserify in your Gulpfile, instead of:
b.transform('browserify-shim');
do:
b.transform({global: true}, 'browserify-shim');
If you're using gulp-browserify, I'm not sure whether there's any way to specify global transforms.
{global: true}
works for me... why is this not a default?