聚合物组分模板缩小

Question

我正在寻找一种方法来缩小模板文字中的空白区域.由于常规js缩小不会删除模板文字上的空白区域,因此我预计可能polymer-cli有一种方法可以缩小这些空间.

缩小结果的一个例子:

import{PolymerElement,html}from'../node_modules/@polymer/polymer/polymer-element.js';export default class MyApp extends PolymerElement{static get is(){return'my-app'}static get template(){return html`
      <style>
        :host {
          display: block;
          height: 100vh;
        }

        .app {
          height: 100vh;
        }
      </style>
      <div class="app">
        My App
      </div>
    `}}customElements.define(MyApp.is,MyApp);

Answer 1

polymer-cli目前不支持标记模板字符串的缩小.在内部,它使用Babel插件来缩小JavaScript,因此理想情况下babel-plugin-minify-template-strings,当启用缩小时,我们能够将插件插入管道中.

现在,我们可以使用babel-cli该插件来处理以下的构建输出polymer-cli:

1. 从Polymer 3模板项目开始,例如,PolymerLabs/start-polymer3.

   git clone https://github.com/PolymerLabs/start-polymer3.git
   cd start-polymer3
   

2. 安装babel-cli和babel-plugin-minify-template-strings插件.您的项目可能需要其他Babel插件.在这种情况下,此模板项目需要babel-plugin-syntax-dynamic-importBabel来处理代码中的动态导入.

   yarn add -D babel-cli \
               babel-plugin-minify-template-strings \
               babel-plugin-syntax-dynamic-import
   

3. 添加包含.babelrc以下文件内容的配置文件:

   {
     "compact": true,
     "ignore": [
       "node_modules"
     ],
     "plugins": [
       "minify-template-strings",
       "syntax-dynamic-import"
     ]
   }
   

4. 添加一个buildNPM脚本以在以下JavaScript输出上package.json运行babel-cli(.babelrc上面)polymer build:

   "scripts": {
     "build": "polymer build && $(npm bin)/babel -d . build/**/src/**/*.js"
   }
   

5. 运行npm run build(或yarn build).命令输出(与polymer-cli (1.7.0-pre.13),运行zsh,macOS High Sierra)应该类似于:

   ?  start-polymer3 git:(master) ? yarn build
   yarn run v1.3.2
   $ polymer build && $(npm bin)/babel -d . build/**/src/**/*.js
   info: [cli.command.build]    Clearing build/ directory...
   info: [cli.build.build]    (es6-unbundled) Building...
   info: [cli.build.build]    (es6-unbundled) Build complete!
   build/es6-unbundled/src/lazy-element.js -> build/es6-unbundled/src/lazy-element.js
   build/es6-unbundled/src/start-polymer3.js -> build/es6-unbundled/src/start-polymer3.js
   ?  Done in 8.66s.
   ?  start-polymer3 git:(master) ?
   

请参阅GitHub repo以及上述更改及其示例输出