rss rss hh new
rss_rss_hh_new

 -

rss_rss_hh_new

 - e-mail

 

 -

LiveInternet.ru:
: 17.03.2011
:
:
: 51

:


polymer-

, 31 2017 . 22:36 +
polymerjs vulcanize

, , . , , ReactJS, PolymerJS, VueJS, d3JS . , , - PolymerJS.

polymer-.


:


1.
2. ?
3. ?
4. vulcanize-polymer-module
4.1.
4.2. bower.json
4.3. package.json
4.3.1.
4.3.2. RollupJS
4.4. vulcanize-utils.js
5.

1.


polymer- , , , , behavior-, . network- . , , -.
polymer- . , , , , index.html, -, . polymer - , html-. polymer , index.html.

2. ?


  1. , polymer-, ( ), , .
  2. , polymer- , polymer.
  3. (paper-, iron- ) ( ), . , .


3. ?


, , , , polymer, , . .
, , polymer , , , , .
, , polymer.

4. vulcanize-polymer-module


vulcanize-polymer-module.
.

4.1.

vulcanize-polymer-module/
+-- imports.html
+-- vulcanize-utils.js
+-- rollup.config.js
+-- bower.json
+-- package.json

4.2. bower.json

, , , polymer.
, dependencies :
dependencies
"dependencies": {
    "polymer": "Polymer/polymer#^2.0.0",
    "polymer-redux": "^1.0.0",
    "iron-flex-layout": "PolymerElements/iron-flex-layout#^2.0.0",
    "paper-button": "PolymerElements/paper-button#^2.0.0",
    "paper-badge": "PolymerElements/paper-badge#^2.0.0",
    "paper-icon-button": "PolymerElements/paper-icon-button#^2.0.0",
    "paper-input": "PolymerElements/paper-input#^2.0.0",
    "paper-item": "PolymerElements/paper-item#^2.0.0",
    "paper-checkbox": "PolymerElements/paper-checkbox#^2.0.0",
    "paper-tabs": "PolymerElements/paper-tabs#^2.0.0",
    "paper-listbox": "PolymerElements/paper-listbox#^2.0.0",
    "iron-a11y-keys": "PolymerElements/iron-a11y-keys#^2.0.0",
    "iron-list": "PolymerElements/iron-list#^2.0.0",
    "iron-icons": "PolymerElements/iron-icons#^2.0.0",
    "paper-progress": "PolymerElements/paper-progress#^2.0.0",
    "vaadin-split-layout": "vaadin/vaadin-split-layout#^2.0.0",
    "vaadin-grid": "^3.0.0",
    "iron-pages": "PolymerElements/iron-pages#^2.0.0",
    "iron-collapse": "PolymerElements/iron-collapse#^2.0.0",
    "iron-overlay-behavior": "PolymerElements/iron-overlay-behavior#^2.0.0",
    "vaadin-context-menu": "^3.0.0"
  }




polymer redux, polymer-redux.

4.3. package.json

, , RollupJS, . , , .

scripts
"scripts": {
    "build": "rollup -c",
    "vulcanize": "vulcanize imports.html  --inline-scripts --inline-css --strip-comments",
    "run-vulcanize": "npm run vulcanize > imports.vulcanize.html",
    "vulcanized": "vulcanize imports.html  --inline-scripts --inline-css --strip-comments | crisper  --html imports.vulcanized.html --js imports.vulcanized.js > imports.vulcanized.html",
    "html-minifier": "html-minifier imports.vulcanized.html --remove-optional-tags --collapse-whitespace --preserve-line-breaks -o imports.vulcanized.min.html",
    "build-all": "npm run vulcanized && npm run build && npm run html-minifier"
  }


, :


4.3.1.

, .
npm install -g vulcanize
npm install -g crisper
npm install -g html-minifier


4.3.2. RollupJS

rollup js- - rollup-plugin-cleanup. rollup-plugin-progress .
rollup.config.js
import progress from 'rollup-plugin-progress';
import cleanup from 'rollup-plugin-cleanup';

export default {
	entry: 'imports.vulcanized.js',
	dest: 'imports.vulcanized.js',

	plugins: [
		cleanup(),
		progress({
		}),
	]
};


4.4. vulcanize-utils.js

loadVulcanized, , , .
.
loadVulcanized = function(url, urlVulcanized, controller, html, store)
  • url . .
  • urlVulcanized - . ../vulcanize-polymer-module/imports.vulcanized.min.html
  • controller . .
  • html html- . , .
  • store redux store. .



5.


polymer-cli build, , polymer-, , polymer . , UI- , polymer.
, , ,
, , .
, , , , (push), bower update.
, - .
, .
Original source: habrahabr.ru (comments, light).

https://habrahabr.ru/post/333660/

:  

— — : [1] []
 

:
: 

: ( )

:

  URL