[Pkg-javascript-devel] trying to build libjs-vue

[Paolo Greppi]

Il 30/11/2017 04:59, Pirate Praveen ha scritto:
> On 2017, നവംബർ 29 3:39:51 PM IST, Paolo Greppi <paolo.greppi at libpf.com> wrote:
>> Hi all, I an trying to build from vue.js sources, see:
>> ITP: https://bugs.debian.org/871459
>> repo: https://anonscm.debian.org/git/pkg-javascript/vue.js.git
>>
>> More precisely what is wanted is the browser (UMD) build, see:
>> https://vuejs.org/v2/guide/installation.html#Explanation-of-Different-Builds
>>
>> To rebuild dist from source, upstream uses rollup (which is currently
>> stuck in contrib) plus a few rollup plugins we lack:
>> - rollup-plugin-buble
>> - rollup-plugin-alias
>> - rollup-plugin-node-resolve
>>
>> Therefore I attempted a hacky build avoiding rollup completely, and
>> using a combination of babeljs + browserify-lite.
>>
>> First I patched .babelrc as follows (apparently jsx can be used by vue
>> apps, but is not required for building vue itself):
>> -  "plugins": ["transform-vue-jsx", "syntax-dynamic-import"],
>> +  "plugins": ["syntax-dynamic-import"],
>>
>> then:
>> apt install node-browserify-lite node-babel-cli
>> node-babel-preset-es2015 node-babel-plugin-syntax-dynamic-import
>> node-babel-preset-flow-vue
>> babeljs src -d dist1
>> NODE_PATH=dist1 browserify-lite --standalone Vue ./dist1/core/index.js
>> --outfile dist/vue.js
>> uglifyjs -o dist/vue.min.js --source-map=dist/vue.min.js.map
>> dist/vue.js
>>
>> The resulting binaries are smaller/different than upstream
>> (https://github.com/vuejs/vue/tree/d4e0c3ef2444384719638a89f2a25af042b95795/dist):
>>
>> ls -l dist
>> ...
>> -rw-r--r-- 1 root root 165464 Nov 29 10:19 vue.js
>> -rw-r--r-- 1 root root 111528 Nov 29 10:19 vue.min.js
>> -rw-r--r-- 1 root root 106896 Nov 29 10:19 vue.min.js.map
>>
>> ls -l ../vue.js-2.5.9/dist
>> ...
>> -rw-r--r-- 1 paolog paolog 286869 nov 27 22:54 vue.common.js
>> -rw-r--r-- 1 paolog paolog 278610 nov 27 22:54 vue.esm.browser.js
>> -rw-r--r-- 1 paolog paolog 286852 nov 27 22:54 vue.esm.js
>> -rw-r--r-- 1 paolog paolog 284067 nov 27 22:54 vue.js
>> -rw-r--r-- 1 paolog paolog  86676 nov 27 22:54 vue.min.js
>> -rw-r--r-- 1 paolog paolog 208010 nov 27 22:54 vue.runtime.common.js
>> -rw-r--r-- 1 paolog paolog 207993 nov 27 22:54 vue.runtime.esm.js
>> -rw-r--r-- 1 paolog paolog 205957 nov 27 22:54 vue.runtime.js
>> -rw-r--r-- 1 paolog paolog  61382 nov 27 22:54 vue.runtime.min.js
>>
>> Testing them in a real-world application which works fine with upstream
>> dist files gives errors in the browser console:
>>
>> vue.js:1450 Uncaught ReferenceError: process is not defined
>>    at Object.10.shared/util (vue.js:1450)
>>    at req (vue.js:6)
>>    at modRequire (vue.js:11)
>>    at Object.4.../config (vue.js:273)
>>    at req (vue.js:6)
>>    at modRequire (vue.js:11)
>>    at Object.1../init (vue.js:54)
>>    at req (vue.js:6)
>>    at modRequire (vue.js:11)
>>    at Object.0../instance/index (vue.js:21)
>>
>> feeds.php:123 Uncaught ReferenceError: Vue is not defined
>>    at feeds.php:123
>>
>> ...
>>
>> Has anybody here more clues than I have ?
> 
> Because browserify-lite will not handle nodejs api conversion. You can use webpack (though one of its dependencies is still stuck in NEW and blocked by 
> https://bugs.debian.org/cgi-bin/bugreport.cgi?bug=881339 it would be great if more people can add their comments there).
> 
> You can enable contrib to get node-acorn-dynamic-import required for webpack.

According to this:
https://medium.com/webpack/webpack-and-rollup-the-same-but-different-a41ad427058c
we really should use rollup over webpack.

Upstream uses rollup+buble and the build/config.js confuses me.
So I gave rollup+babel a try, starting from scratch, here is my journey.

I picked:
- node-he, node-rollup-plugin-commonjs and node-babel-plugin-external-helpers from main, 
- node-rollup-plugin-node-resolve from the NEW queue

Installed from npm:
- rollup-plugin-babel (could be worth an ITP)
- babel-preset-es2015-rollup
the latter will not be necessary anymore with Babel>6.13, see https://github.com/rollup/rollup-plugin-babel#configuring-babel

.babelrc:
{ "presets": ["es2015-rollup", "flow-vue"] }

rollup.config.js:
import resolve from 'rollup-plugin-node-resolve';
import babel from 'rollup-plugin-babel';
export default {
  entry: './src/platforms/web/entry-runtime-with-compiler.js',
  moduleName: 'Vue',
  plugins: [resolve(), babel({exclude: 'node_modules/**'})],
  dest: { 'dist/vue.js' }
};

then:
rollup -c rollup.config.js -f umd

I get 2 times "[!] Error: A module cannot import itself" which I git rid with:
diff --git a/src/platforms/web/compiler/directives/model.js b/src/platforms/web/compiler/directives/model.js
-import { genComponentModel, genAssignmentCode } from 'compiler/directives/model'
+import { genComponentModel, genAssignmentCode } from '/compiler/directives/model'
diff --git a/src/platforms/web/compiler/index.js b/src/platforms/web/compiler/index.js
-import { createCompiler } from 'compiler/index'
+import { createCompiler } from '/compiler/index'

I am unsure about these fixes, it completes with warnings:
(!) Unresolved dependencies
https://github.com/rollup/rollup/wiki/Troubleshooting#treating-module-as-external-dependency
web/util/element (imported by src/core/vdom/patch.js)
/compiler/directives/model (imported by src/platforms/web/compiler/directives/model.js)
he (imported by src/compiler/parser/index.js)
web/compiler/util (imported by src/compiler/parser/html-parser.js)
/compiler/index (imported by src/platforms/web/compiler/index.js)
(!) Unused external imports
default imported from external module 'he' but never used
isNonPhrasingTag imported from external module 'web/compiler/util' but never used
(!) Missing global variable names
Use options.globals to specify browser global variable names corresponding to external modules
web/util/element (guessing 'web_util_element')
/compiler/directives/model (guessing '_______________compiler_directives_model')
he (guessing 'he')
web/compiler/util (guessing 'web_compiler_util')
/compiler/index (guessing '_______________compiler_index')
created dist/vue.js in 10.8s

and:
ls -l dist
-rw-r--r-- 1 root root 239866 Nov 30 19:26 vue.js
...

Paolo