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时将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添加package.json NPM脚本，以便在babel-cli的JavaScript输出上运行.babelrc（上面有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及其sample output

Answer 2

您是否尝试使用以下配置设置polymer.json？：

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

聚合物组分模板缩小

2 个答案: