polymer - 聚合物组件模板缩小

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);

score 6 · Accepted Answer

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

现在，我们可以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-importBabel 来处理代码中的动态导入。
```
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"
  ]
}

添加一个buildNPM 脚本以在 JavaScript 输出上package.json运行babel-cli（如上）：.babelrcpolymer 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 存储库及其示例输出

score 2 · Accepted Answer

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

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

polymer - 聚合物组件模板缩小

2 回答 2

Related

Reference