聚合物组分模板缩小

Question

我正在寻找一种方法来缩小模板文字中的白色 space。由于常规的 js 缩小不会删除模板文字上的白色 space 我期望 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.json？：

"builds": [{
  "bundle": true,
  "js": {"minify": true},
  "css": {"minify": true},
  "html": {"minify": true}
}],

Answer 2

polymer-cli 目前不支持缩小标记的模板字符串。在内部，它使用 Babel 插件来缩小 JavaScript，因此理想情况下我们能够插入 babel-plugin-minify-template-strings plugin into the pipeline when minification is enabled.

现在，我们可以使用 babel-cli 和那个插件来处理 polymer-cli:

的构建输出

从 Polymer 3 模板项目开始，例如，PolymerLabs/start-polymer3。

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

安装 babel-cli 和 babel-plugin-minify-template-strings 插件。您的项目可能需要其他 Babel 插件。在这种情况下，此模板项目需要 babel-plugin-syntax-dynamic-import Babel 来处理代码中的动态导入。
```
yarn add -D babel-cli \
            babel-plugin-minify-template-strings \
            babel-plugin-syntax-dynamic-import
```

添加一个 .babelrc 配置文件，文件内容如下：

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

添加一个build NPM脚本到package.json到运行 babel-cli（上面有.babelrc）在JavaScript polymer build 的输出：
```
"scripts": {
  "build": "polymer build && $(npm bin)/babel -d . build/**/src/**/*.js"
}
```

运行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 with the above changes, and its sample output

聚合物组分模板缩小

Polymer component template minification

polymer

minify

polymer-cli

polymer-3.x