Hi,
I would like to know how can I setup the erpnext/frappe to execute vuejs in production mode.
I find out that I can run the commands bellow to minify the js and css, but it still show me the notification on the console that I’m running vuejs in development mode.
bench build --app=frappe
bench build --app=erpnext
Thanks. Regards.
Frappe app needs to be updated to have this fixed.
The fix goes this way. At frappe app directory -
yarn add rollup-plugin-replace --save-dev
This adds the rollup-plugin-replace to the node modules.
Change frappe/rollup/config.js file to:
const path = require('path');
const fs = require('fs');
const chalk = require('chalk');
const log = console.log; // eslint-disable-line
const multi_entry = require('rollup-plugin-multi-entry');
const commonjs = require('rollup-plugin-commonjs');
const node_resolve = require('rollup-plugin-node-resolve');
const postcss = require('rollup-plugin-postcss');
const buble = require('rollup-plugin-buble');
const { terser } = require('rollup-plugin-terser');
const vue = require('rollup-plugin-vue');
const frappe_html = require('./frappe-html-plugin');
const replace = require('rollup-plugin-replace')
const production = process.env.FRAPPE_ENV === 'production';
const {
apps_list,
assets_path,
bench_path,
get_public_path,
get_app_path,
get_build_json,
get_options_for_scss
} = require('./rollup.utils');
function get_rollup_options(output_file, input_files) {
if (output_file.endsWith('.js')) {
return get_rollup_options_for_js(output_file, input_files);
} else if(output_file.endsWith('.css')) {
return get_rollup_options_for_css(output_file, input_files);
}
}
function get_rollup_options_for_js(output_file, input_files) {
const node_resolve_paths = [].concat(
// node_modules of apps directly importable
apps_list.map(app => path.resolve(get_app_path(app), '../node_modules')).filter(fs.existsSync),
// import js file of any app if you provide the full path
apps_list.map(app => path.resolve(get_app_path(app), '..')).filter(fs.existsSync)
);
const plugins = [
// Turn on vue production mode by using vue.min.js
production && replace({
'process.env.NODE_ENV': JSON.stringify( 'production' )
}),
// enables array of inputs
multi_entry(),
// .html -> .js
frappe_html(),
// ignore css imports
ignore_css(),
// .vue -> .js
vue.default(),
// ES6 -> ES5
buble({
objectAssign: 'Object.assign',
transforms: {
dangerousForOf: true,
classes: false
},
exclude: [path.resolve(bench_path, '**/*.css'), path.resolve(bench_path, '**/*.less')]
}),
commonjs(),
node_resolve({
customResolveOptions: {
paths: node_resolve_paths
}
}),
production && terser()
];
return {
inputOptions: {
input: input_files,
plugins: plugins,
context: 'window',
external: ['jquery'],
onwarn({ code, message, loc, frame }) {
// skip warnings
if (['EVAL', 'SOURCEMAP_BROKEN', 'NAMESPACE_CONFLICT'].includes(code)) return;
if ('UNRESOLVED_IMPORT' === code) {
log(chalk.yellow.underline(code), ':', message);
const command = chalk.yellow('bench setup requirements');
log(`Cannot find some dependencies. You may have to run "${command}" to install them.`);
log();
return;
}
if (loc) {
log(`${loc.file} (${loc.line}:${loc.column}) ${message}`);
if (frame) log(frame);
} else {
log(chalk.yellow.underline(code), ':', message);
}
}
},
outputOptions: {
file: path.resolve(assets_path, output_file),
format: 'iife',
name: 'Rollup',
globals: {
'jquery': 'window.jQuery'
},
sourcemap: true
}
};
}
function get_rollup_options_for_css(output_file, input_files) {
const output_path = path.resolve(assets_path, output_file);
const minimize_css = output_path.startsWith('css/') && production;
const plugins = [
// enables array of inputs
multi_entry(),
// less -> css
postcss({
extract: output_path,
use: [
['less', {
// import other less/css files starting from these folders
paths: [
path.resolve(get_public_path('frappe'), 'less')
]
}],
['sass', get_options_for_scss()]
],
include: [
path.resolve(bench_path, '**/*.less'),
path.resolve(bench_path, '**/*.scss'),
path.resolve(bench_path, '**/*.css')
],
minimize: minimize_css
})
];
return {
inputOptions: {
input: input_files,
plugins: plugins,
onwarn(warning) {
// skip warnings
if (['EMPTY_BUNDLE'].includes(warning.code)) return;
// console.warn everything else
log(chalk.yellow.underline(warning.code), ':', warning.message);
}
},
outputOptions: {
// this file is always empty, remove it later?
file: path.resolve(assets_path, `css/rollup.manifest.css`),
format: 'cjs'
}
};
}
function get_options_for(app) {
const build_json = get_build_json(app);
if (!build_json) return [];
return Object.keys(build_json)
.map(output_file => {
if (output_file.startsWith('concat:')) return null;
const input_files = build_json[output_file]
.map(input_file => {
let prefix = get_app_path(app);
if (input_file.startsWith('node_modules/')) {
prefix = path.resolve(get_app_path(app), '..');
}
return path.resolve(prefix, input_file);
});
return Object.assign(
get_rollup_options(output_file, input_files), {
output_file
});
})
.filter(Boolean);
}
function ignore_css() {
return {
name: 'ignore-css',
transform(code, id) {
if (!['.css', '.scss', '.sass', '.less'].some(ext => id.endsWith(ext))) {
return null;
}
return `
// ignored ${id}
`;
}
};
};
module.exports = {
get_options_for
};
The lines
const replace = require(‘rollup-plugin-replace’)
…
// Turn on vue production mode by using vue.min.js
production && replace({
‘process.env.NODE_ENV’: JSON.stringify( ‘production’ )
}),
were added to turn on vue production mode.
Hi Joseph,
I made as you suggest, seems that it’s not working still.
I add the code into frappe/rollup/config.js
const replace = require(‘rollup-plugin-replace’)
// Turn on vue production mode by using vue.min.js
production && replace({
‘process.env.NODE_ENV’: JSON.stringify( ‘production’ )
}),
After I run the command
bench build --app=frappe
bench build --app=erpnext
Thanks.
Please correct the placement of production && replace to just before production && terser()
@Joseph_Marie_Alba , @Joseph_Marie_Alba1 , @mariohbrino
When importing Vuesax or Vuetify
VueJs productionTip : process.env …
Shows ReferenceError: process is not defined
Any Idea how to solve this ?