Re: [Pkg-javascript-devel] trying to build libjs-vue
Il 01/12/2017 06:55, Pirate Praveen ha scritto: > On വെള്ളി 01 ഡിസംബര് 2017 12:05 രാവിലെ, Paolo Greppi wrote: >> According to this: >> https://medium.com/webpack/webpack-and-rollup-the-same-but-different-a41ad427058c >> we really should use rollup over webpack. > > But we don't have rollup in main, we have been working on it for quite > some time and it is going to take quite some more time before we can use > it in main. webpack is almost there (packaging complete), except for the > conflict with ftp masters on node-babel-preset-env. > > See node-d3-zoom or node-d3-scale for example webpack configuration. Good tip Praveen: webpack succeded in compiling vue.js ! I install node-babel-preset-env from local build, then: apt install webpack node-babel-loader node-babel-plugin-add-module-exports cat .babelrc { "presets": [ "es2015", "flow-vue"], "plugins": [ "syntax-dynamic-import", "babel-plugin-add-module-exports", ], "ignore": [ "dist/*.js", "packages/**/*.js" ] } cat webpack.config.js 'use strict'; var fs = require('fs'); var path = require('path'); var webpack = require('webpack'); var config = { target: 'web', entry: './src/platforms/web/entry-runtime-with-compiler.js', resolve: { modules: ['/usr/lib/nodejs', './src', './src/platforms'], }, resolveLoader: { modules: ['/usr/lib/nodejs'], }, output: { path: path.resolve(__dirname, 'dist'), filename: 'vue.js', library: "Vue", libraryTarget: 'umd', umdNamedDefine: true }, module: { rules: [ { use: [ 'babel-loader' ] } ] } } module.exports = config; webpack --config webpack.config.js I get frequent segmentation faults, probably the same as https://bugs.debian.org/878674 BTW, I can get rid of those with: npm install webpack (I then keep using the binary installed by the package, but the locally installed node modules somehow cure the problem; I should probably report that to #878674 ...) Anyway when ends I get a much larger "binary": -rw-r--r-- 1 root root 468242 Dec 1 12:35 vue.js and when I test that in a test application it works ! This is twice the size of the "binary" produced by upstream with rollup, but I still have to experiment with dead code removal (https://webpack.js.org/guides/tree-shaking/#minify-the-output). In any case we have to wait for node-babel-preset-env before I proceed with the RFS of this one. Paolo -- Pkg-javascript-devel mailing list Pkg-javascript-devel@lists.alioth.debian.org http://lists.alioth.debian.org/cgi-bin/mailman/listinfo/pkg-javascript-devel
Re: [Pkg-javascript-devel] trying to build libjs-vue
On വെള്ളി 01 ഡിസംബര് 2017 12:05 രാവിലെ, Paolo Greppi wrote: > According to this: > https://medium.com/webpack/webpack-and-rollup-the-same-but-different-a41ad427058c > we really should use rollup over webpack. But we don't have rollup in main, we have been working on it for quite some time and it is going to take quite some more time before we can use it in main. webpack is almost there (packaging complete), except for the conflict with ftp masters on node-babel-preset-env. See node-d3-zoom or node-d3-scale for example webpack configuration. > 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 > ... I guess you could ignore the warnings. > Paolo > signature.asc Description: OpenPGP digital signature -- Pkg-javascript-devel mailing list Pkg-javascript-devel@lists.alioth.debian.org http://lists.alioth.debian.org/cgi-bin/mailman/listinfo/pkg-javascript-devel
Re: [Pkg-javascript-devel] trying to build libjs-vue
Il 30/11/2017 04:59, Pirate Praveen ha scritto: > On 2017, നവംബർ 29 3:39:51 PM IST, Paolo Greppi 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 a
Re: [Pkg-javascript-devel] trying to build libjs-vue
On 2017, നവംബർ 29 3:39:51 PM IST, Paolo Greppi 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. >Paolo -- Sent from my Android device with K-9 Mail. Please excuse my brevity. -- Pkg-javascript-devel mailing list Pkg-javascript-devel@lists.alioth.debian.org http://lists.alioth.debian.org/cgi-bin/mailman/listinfo/pkg-javascript-devel