Include Vue runtime separately than single file component with Browserify - vue.js

I am currently building my .vue files into single file components with Browserify.
The only problem with this is each SFC includes the Vue runtime into the file causing the filesize to be much larger than it needs to be since the Vue runtime is common code across multiple pages and SFCs.
I was hoping to use Browserify to separate it out and load the common across pages.
I've read a bunch of different articles on the topic, but haven't been able to make any of them work.
Here is how I am building my Vue SFCs and excluding the runtime:
b
.transform('vueify')
.transform(
{global: true},
envify({NODE_ENV: 'production'})
)
.external('vue')
.bundle()
Then I would like to just load the Javascript separately like so:
<script src="vue.runtime.min.js"></script>
<script src="built-sfc.js"></script>
I've tried a whole bunch of different combinations of building the SFCs and the Vue runtime, but nothing works and I have run out of ideas!

I figured it out eventually, part of the issue was other problems in the our Vue building in Grunt.
But this is the Grunt commands we have for buildings the runtime and SFCs separately
vueRuntime: {
expand: true,
cwd: 'node_modules/vue/dist/',
src: 'vue.runtime.min.js',
dest: 'js/libs',
ext: '.js',
extDot: 'first',
options: {
configure: b => b
.require('vue')
.transform(
// Required in order to process node_modules files
{global: true},
envify({NODE_ENV: 'production'})
)
.bundle(),
browserifyOptions: {
debug: false
}
}
},
vue: {
expand: true,
cwd: 'js/pages/',
src: '**/*.vue.js',
dest: 'js/pages',
ext: '.js',
extDot: 'first',
options: {
configure: b => b
.transform('vueify')
.transform(
// Required in order to process node_modules files
{global: true},
envify({NODE_ENV: 'production'})
)
.external('vue')
.bundle(),
browserifyOptions: {
debug: false
}
}
}

Related

Appropriate Loader Setup for the Images in vue js

I'm struggling with the Setting up Loaders for my VueJS project (vue3), to be more specific i have a following structure of the folders
My Images is located at path called assets and I would like url-loader to know, that he need to grab images from THIS path.
my loaders configuration at vue.config.js looks following
configureWebpack: {
module: {
rules: [
{ test: /\.(jpg|jpeg|png|woff|woff2|eot|ttf|svg)$/,
loader: 'url-loader',
options: {limits: 100000, name: "/assets/[name].[ext]"}},
],
}
},
If there is any obvious mistakes PLEASE point out on them.
Cuz i'm not really sure if i did it right

How to compile my npm lib with webpack andwhat config?

I am making a js that I aim to publish npm. It will be used on both web and node.
I read webpack doc and I use this following config. Bundled and minified, it produces a 20kb package, which, IMHO, is pretty big for what it does.
Should I bundle it with webpack that way ?
{
mode: 'production',
entry: {
mylib: './src/mylib_browser.ts', // same for node
"mylib.min": './src/mylib_browser.ts'
},
watch: true,
target: 'web', // node for node
devtool: 'source-map',
externals: [nodeExternals()],
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
}
]
},
resolve: {
extensions: ['.tsx', '.ts', '.js']
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name]_browser.js',
libraryTarget: 'umd',
library: 'MyLib',
umdNamedDefine: true
},
plugins: [
new UglifyJsPlugin({
sourceMap: true,
include: /\.min\.js$/,
})
],
};
And I have the same config for node.
Is it the right config to do it? How could I decrease size ?
Also, when I look at other npm package, a lot are just vanilla js. Should I just let the user of my npm package, package it as a normal dependency ?
Are you sure the minification is happening? You have UglifyJs only minifying already minified files, which seems wrong?
new UglifyJsPlugin({
sourceMap: true,
include: /\.min\.js$/, //<= remove this line
})
Also, when I look at other npm package, a lot are just vanilla js. Should I just let the user of my npm package, package it as a normal dependency ?
If your library will be packaged by consumers then I would distribute with both minified and unminified sources. This allows consumers to include the minified library via one of the npm CDNs (e.g. unpkg) when hacking around (e.g. jsfiddle) and the unminified when using the library as part of a bundled application, e.g. via webpack.
If your library is only meant for the Node environment then minification is generally considered unnecessary and even a burden should the consumer encounter a bug in your library and wish to debug it.

Setup Babel + Uglify + Karma using Grunt

I´m trying to setup a build workflow using the aforementioned technologies, but I´m getting the following error, which seems very generic upon running tests on karma:
TypeError: 'undefined' is not an object (evaluating 'a.Sifter=b()')
This happens even without adding any ECMSA6 specific feature. The same workflow works fine without the transpiling phase in the workflow.
What I tried was to set the babeljs after a concatenation phase and before executing a uglifying on it, like the following snippet:
var defaultTasks = [
"sass:prod", // compile scss sources
"cleanAll", // clean folders: preparing for copy
"copyAll", // copying bower files
"cssmin:customVendor", // minify and concat 'customized from vendor' css
"concat:vendorStyles", // concat vendors's css + minified 'customized from vendor' and distribute as 'css/vendor.css'
"uglify:rawVendors", // minifies unminified vendors
"concat:vendorScripts", // concat vendors's scripts and distribute as 'scripts/vendor.js'
"ngAnnotate:app", // ng-annotates app's scripts
"concat:appScripts", // concat app's (customized from vendor's + ng-annotated + customer's)
"babel",// uses babeljs to convert brandnew ES6 javascript into ES5 allowing for old browsers
"uglify:app" // minify app script and distribute as 'scripts/app.js'
];
if (!skipTest) {
defaultTasks.push("karma:target"); // run tests on minified scripts
}
The imporant definitions are shown:
babel: {
options: {
"presets": ['es2015']
},
dist: {
files: {
"<%= concat.appScripts.dest %>": "<%= concat.appScripts.dest %>"
}
}
},
uglify: {
options: {
mangle: {
except: [
"jQuery", "angular", "tableau", "LZString", "moment", "Moment", "Modernizr",
"app", "modules"
]
}
},
app: {
files: [{
src: ["<%= concat.appScripts.dest %>"],
dest: "<%= app.dist %>/scripts/app.js"
}]
}
},
I´ve tested the transpile a bit, running the default logic from babel url, and it works well, converting basic stuff.
Is there any better workflow that I could use to still run the tests against the same code that would be executed for real?
Thanks
In the end, the workflow was correct.
I just need to modify the filesets a bit in order to avoid transpiling the selectize.js file (which wasn´t really needed).
However, not sure why it was breaking
That solved to me, so I´m closing the question, but perhaps might be useful for someone else.

Bundle ractive with ractive-load through Rollup

What is the correct way to import ractive and ractive-load to my rollup project? npm or github?
Currently I am using npm to install each one:
npm install --save-dev ractivejs/ractive
And
npm install --save-dev ractivejs/ractive-load
And I'm using rollup-plugin-commonjs with rollup-plugin-node-resolve to corretly bundle them (rollup.config.js in the end of the question):
import Ractive from 'ractive';
import load from 'ractive-load';
...
But it seems that ractive-load also imports other modules in its code, causing this error:
Error parsing /home/.../node_modules/rcu/src/make.js: 'import' and 'export' may only appear at the top level (2:0) in /home/.../node_modules/rcu/src/make.js
How can I correctly use Rollup and which are the right sources for this case (npm or github)?
Here is my rollup.config.js:
import commonjs from 'rollup-plugin-commonjs';
import nodeResolve from 'rollup-plugin-node-resolve';
export default {
entry: 'src/main.js',
plugins: [
nodeResolve({
jsnext: true,
main: true,
browser: true,
}),
commonjs({
sourceMap: false
}),
// uglify()
],
format: 'iife',
moduleName: 'Altiva',
dest: 'altiva.js'
};
ractive-load is intended to "read" link tags in the browser and then do AJAX requests for the component file, then it uses a library called rcu to convert the component files into usable javascript components.
What you need is a utility (that uses rcu or does equivalent work) to turn your component files into javascript files that you can run during build process then hand-off to rollup. Fortunately, it looks like there is a rollup plugin rollup-plugin-ractive designed to do just that:
rollup({
entry: 'src/main.js',
plugins: [
ractive({
// By default, all .html files are compiled
extensions: [ '.html', '.ract' ],
// You can restrict which files are compiled
// using `include` and `exclude`
include: 'src/components/**.html'
})
]
}).then(...)
There's also list of some of the available loaders here, among them are "plain vanilla js" variants as well.

Bootstrap "grunt watch" wont create bootstrap.min.css

I am almost absolutely new to grunt.
I used grunt with bootstrap 3.1.1 and the grunt watch-command worked out great. My bootstrap.min.css file was compiled every time. (i upload my bootstrap.min.css)
Later on i lost my 3.1.1 grunt file (long story short my computer crashed).
So now with Bootstrap 3.2.0 i was going to restablish my grunt-work-flow.
But now when i use grunt watch i only get the "bootstrap.css" and "bootstrap.theme.css" compiled.
I have spent the last hours to figure this out without success.
WHAT I WANT
I want grunt watch to compile the minified "bootstrap.min.css"
So how do i call the min.css-function on the watch?
I will be glad to get some help.
Grunt watch will only watch the files then run tasks you have set. I am assuming in your gruntfile you ahve something like this:
css: {
files: [
'bootstrap.css',
],
tasks: ['less'],
},
In the less task you should have something like below. Note the cleancss option being set to true:
options: {
cleancss: true
},
files: {
"dest/bootstrap.min.css": "src/bootstrap.css",
"dest/bootstrap.theme.min.css": "src/bootstrap.theme.css"
}
UPDATE:
Based on the file you uploaded you should be running the cssmin:core task when the watch is triggered.
UPDATE 2:
To update the watch task you can just add the cssmin:core task to the less subtask:
less: {
files: 'less/**/*.less',
tasks: ['less', 'cssmin:core]
}
Here you are telling it to run the less task, followed by the cssmin task whenever one of the less files is changed while watching.
Your gruntfile.js will have a 'watch' section as below
watch: {
src: {
files: '<%= jshint.core.src %>',
tasks: ['jshint:src', 'qunit', 'concat']
},
test: {
files: '<%= jshint.test.src %>',
tasks: ['jshint:test', 'qunit']
},
less: {
files: 'less/**/*.less',
tasks: 'less'
}
},
The tasks under less subsection define the tasks that 'grunt watch' will run. In Bootstrap 3.3.2 (I guess in 3.1.1 also it would be the same) is the 'cssmin' task that minifies the core bootstrap css. So you need to add the task to less so the code above becomes
watch: {
src: {
files: '<%= jshint.core.src %>',
tasks: ['jshint:src', 'qunit', 'concat']
},
test: {
files: '<%= jshint.test.src %>',
tasks: ['jshint:test', 'qunit']
},
less: {
files: 'less/**/*.less',
tasks: ['less', 'cssmin']
}
},
None of the above worked for me. Looks like the css minification command changed to cssmin:minifyCore so I have updated my watch task to the following:
watch: {
src: {
files: '<%= jshint.core.src %>',
tasks: ['jshint:core', 'qunit', 'concat']
},
test: {
files: '<%= jshint.test.src %>',
tasks: ['jshint:test', 'qunit']
},
less: {
files: 'less/**/*.less',
tasks: ['less', 'cssmin:minifyCore']
}
},
Hopefully this helps others!