如何使用 Polymer 2 构建过程？
How to use Polymer 2 Build Process?
我知道这可能与 重复，但一直没有明确的答案。
到目前为止，Polymer 2 Framework 有一个非常好的文档，但是当涉及到构建过程时，没有足够的解释。
我已经成功创建了自己的元素，还引用了外部脚本并且一切正常
polymer serve --open
但我花了很多时间来构建它并将输出包含到最小的 HTML 模板中，但没有成功。真的有那么难吗？
我什至用空元素模板再次尝试过，没有机会。此模板几乎是空白 polymer.json:
{
"lint": {
"rules": [
"polymer-2"
]
}
}
如果我马上用
构建它
polymer build
（应该使用默认构建行为）然后我得到一个带有 index.html 和 bower_components 文件夹的默认构建文件夹。没有引用我创建的自定义元素 ("Hello ...")。
我需要做什么才能获得此 "Hello Something" 模板的最终版本并将其包含在最小 html 页面中？
Re polymer build“此命令仅适用于应用程序项目。”(https://www.polymer-project.org/2.0/docs/tools/polymer-cli-commands#build)
此外，shell 是必需的。参见 https://www.polymer-project.org/2.0/docs/tools/polymer-json#shell。
从单个组件到使用该单个组件的应用程序有很多不同的方法，我不会说 100% 这是最好的，但它应该有效。 "What do I have to do to get a final build of this "Hello Something" template and include it into a minimum html page?", 是一个非常灵活的请求，所以即使在下面也可能有很多选择，但下面是我的建议。我们将从命令行开始，从桌面或您保存项目的文件夹。
mkdir minimal-html-page
cd minimal-html-page
polymer init
// here make sure you choose `polymer-2-application` other questions re of little consequence in this specific use case
bower install {yourComponent} --save
// in that case that you haven't published to github, copy and paste also works. Paste into the `src` directory if that's the case.
atom .
// or whatever editor you prefer
现在你在你的项目中，只需要一个改变就可以让你继续。
index.html
更改当前 HTML 导入
<link rel="import" href="/src/build-test-app/build-test-app.html">
到 link 到你的组件。
此时您应该可以自由使用 polymer build 来构建项目，然后它会构建您的代码以通过类似于
的方式部署到其他应用程序中
<script src="/bower_components/webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="/src/build-test-app/build-test-app.html">
<build-test-app></build-test-app>
这是最基本的构建，不会考虑您在项目中可能拥有的任何 x-browser 或性能目标。您还将在 build/default 目录中看到 copy/paste 在其他地方使用该组件所需的所有文件。
如果您确实有 x-browser 期望，您可以使用 polymer build --compile 命令相当轻松地解决它们。这将创建稍微复杂的嵌入代码来管理 ES5/6 能力边界的任一侧，看起来像：
<script>!function(e){var r=e.babelHelpers={};r.typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},r.classCallCheck=function(e,r){if(!(e instanceof r))throw new TypeError("Cannot call a class as a function")},r.createClass=function(){function e(e,r){for(var t=0;t<r.length;t++){var n=r[t];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(r,t,n){return t&&e(r.prototype,t),n&&e(r,n),r}}(),r.defineEnumerableProperties=function(e,r){for(var t in r){var n=r[t];n.configurable=n.enumerable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,t,n)}return e},r.defaults=function(e,r){for(var t=Object.getOwnPropertyNames(r),n=0;n<t.length;n++){var o=t[n],i=Object.getOwnPropertyDescriptor(r,o);i&&i.configurable&&void 0===e[o]&&Object.defineProperty(e,o,i)}return e},r.defineProperty=function(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e},r.extends=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e},r.get=function e(r,t,n){null===r&&(r=Function.prototype);var o=Object.getOwnPropertyDescriptor(r,t);if(void 0===o){var i=Object.getPrototypeOf(r);return null===i?void 0:e(i,t,n)}if("value"in o)return o.value;var a=o.get;if(void 0!==a)return a.call(n)},r.inherits=function(e,r){if("function"!=typeof r&&null!==r)throw new TypeError("Super expression must either be null or a function, not "+typeof r);e.prototype=Object.create(r&&r.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),r&&(Object.setPrototypeOf?Object.setPrototypeOf(e,r):e.__proto__=r)},r.instanceof=function(e,r){return null!=r&&"undefined"!=typeof Symbol&&r[Symbol.hasInstance]?r[Symbol.hasInstance](e):e instanceof r},r.newArrowCheck=function(e,r){if(e!==r)throw new TypeError("Cannot instantiate an arrow function")},r.objectDestructuringEmpty=function(e){if(null==e)throw new TypeError("Cannot destructure undefined")},r.objectWithoutProperties=function(e,r){var t={};for(var n in e)r.indexOf(n)>=0||Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n]);return t},r.possibleConstructorReturn=function(e,r){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!r||"object"!=typeof r&&"function"!=typeof r?e:r},r.set=function e(r,t,n,o){var i=Object.getOwnPropertyDescriptor(r,t);if(void 0===i){var a=Object.getPrototypeOf(r);null!==a&&e(a,t,n,o)}else if("value"in i&&i.writable)i.value=n;else{var u=i.set;void 0!==u&&u.call(o,n)}return n},r.slicedToArray=function(){function e(e,r){var t=[],n=!0,o=!1,i=void 0;try{for(var a,u=e[Symbol.iterator]();!(n=(a=u.next()).done)&&(t.push(a.value),!r||t.length!==r);n=!0);}catch(e){o=!0,i=e}finally{try{!n&&u.return&&u.return()}finally{if(o)throw i}}return t}return function(r,t){if(Array.isArray(r))return r;if(Symbol.iterator in Object(r))return e(r,t);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}(),r.taggedTemplateLiteral=function(e,r){return Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(r)}}))},r.temporalRef=function(e,r,t){if(e===t)throw new ReferenceError(r+" is not defined - temporal dead zone");return e},r.temporalUndefined={},r.toArray=function(e){return Array.isArray(e)?e:Array.from(e)},r.toConsumableArray=function(e){if(Array.isArray(e)){for(var r=0,t=Array(e.length);r<e.length;r++)t[r]=e[r];return t}return Array.from(e)}}("undefined"==typeof global?self:global);</script>
<script>if (!window.customElements) { document.write('<!--'); }</script>
<script type="text/javascript" src="/bower_components/webcomponentsjs/custom-elements-es5-adapter.js"></script>
<!--! do not remove -->
<script src="/bower_components/webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="/src/build-test-app/build-test-app.html">
<build-test-app></build-test-app>
<!--! do not remove --> 部分不是开玩笑，它是确保编译后的代码在 ES6 环境中工作不可或缺的一部分。
除此之外，您还可以做很多事情来调整它以进行生产部署。我会研究 https://www.polymer-project.org/2.0/docs/tools/polymer-cli-commands#build and https://www.polymer-project.org/2.0/docs/tools/polymer-json 以更好地处理这个问题。
我知道这可能与
到目前为止，Polymer 2 Framework 有一个非常好的文档，但是当涉及到构建过程时，没有足够的解释。
我已经成功创建了自己的元素，还引用了外部脚本并且一切正常
polymer serve --open
但我花了很多时间来构建它并将输出包含到最小的 HTML 模板中，但没有成功。真的有那么难吗？
我什至用空元素模板再次尝试过，没有机会。此模板几乎是空白 polymer.json:
{
"lint": {
"rules": [
"polymer-2"
]
}
}
如果我马上用
构建它polymer build
（应该使用默认构建行为）然后我得到一个带有 index.html 和 bower_components 文件夹的默认构建文件夹。没有引用我创建的自定义元素 ("Hello ...")。
我需要做什么才能获得此 "Hello Something" 模板的最终版本并将其包含在最小 html 页面中？
Re polymer build“此命令仅适用于应用程序项目。”(https://www.polymer-project.org/2.0/docs/tools/polymer-cli-commands#build)
此外，shell 是必需的。参见 https://www.polymer-project.org/2.0/docs/tools/polymer-json#shell。
从单个组件到使用该单个组件的应用程序有很多不同的方法，我不会说 100% 这是最好的，但它应该有效。 "What do I have to do to get a final build of this "Hello Something" template and include it into a minimum html page?", 是一个非常灵活的请求，所以即使在下面也可能有很多选择，但下面是我的建议。我们将从命令行开始，从桌面或您保存项目的文件夹。
mkdir minimal-html-page
cd minimal-html-page
polymer init
// here make sure you choose `polymer-2-application` other questions re of little consequence in this specific use case
bower install {yourComponent} --save
// in that case that you haven't published to github, copy and paste also works. Paste into the `src` directory if that's the case.
atom .
// or whatever editor you prefer
现在你在你的项目中，只需要一个改变就可以让你继续。
index.html
更改当前 HTML 导入
<link rel="import" href="/src/build-test-app/build-test-app.html">
到 link 到你的组件。
此时您应该可以自由使用 polymer build 来构建项目，然后它会构建您的代码以通过类似于
<script src="/bower_components/webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="/src/build-test-app/build-test-app.html">
<build-test-app></build-test-app>
这是最基本的构建，不会考虑您在项目中可能拥有的任何 x-browser 或性能目标。您还将在 build/default 目录中看到 copy/paste 在其他地方使用该组件所需的所有文件。
如果您确实有 x-browser 期望，您可以使用 polymer build --compile 命令相当轻松地解决它们。这将创建稍微复杂的嵌入代码来管理 ES5/6 能力边界的任一侧，看起来像：
<script>!function(e){var r=e.babelHelpers={};r.typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},r.classCallCheck=function(e,r){if(!(e instanceof r))throw new TypeError("Cannot call a class as a function")},r.createClass=function(){function e(e,r){for(var t=0;t<r.length;t++){var n=r[t];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(r,t,n){return t&&e(r.prototype,t),n&&e(r,n),r}}(),r.defineEnumerableProperties=function(e,r){for(var t in r){var n=r[t];n.configurable=n.enumerable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,t,n)}return e},r.defaults=function(e,r){for(var t=Object.getOwnPropertyNames(r),n=0;n<t.length;n++){var o=t[n],i=Object.getOwnPropertyDescriptor(r,o);i&&i.configurable&&void 0===e[o]&&Object.defineProperty(e,o,i)}return e},r.defineProperty=function(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e},r.extends=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e},r.get=function e(r,t,n){null===r&&(r=Function.prototype);var o=Object.getOwnPropertyDescriptor(r,t);if(void 0===o){var i=Object.getPrototypeOf(r);return null===i?void 0:e(i,t,n)}if("value"in o)return o.value;var a=o.get;if(void 0!==a)return a.call(n)},r.inherits=function(e,r){if("function"!=typeof r&&null!==r)throw new TypeError("Super expression must either be null or a function, not "+typeof r);e.prototype=Object.create(r&&r.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),r&&(Object.setPrototypeOf?Object.setPrototypeOf(e,r):e.__proto__=r)},r.instanceof=function(e,r){return null!=r&&"undefined"!=typeof Symbol&&r[Symbol.hasInstance]?r[Symbol.hasInstance](e):e instanceof r},r.newArrowCheck=function(e,r){if(e!==r)throw new TypeError("Cannot instantiate an arrow function")},r.objectDestructuringEmpty=function(e){if(null==e)throw new TypeError("Cannot destructure undefined")},r.objectWithoutProperties=function(e,r){var t={};for(var n in e)r.indexOf(n)>=0||Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n]);return t},r.possibleConstructorReturn=function(e,r){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!r||"object"!=typeof r&&"function"!=typeof r?e:r},r.set=function e(r,t,n,o){var i=Object.getOwnPropertyDescriptor(r,t);if(void 0===i){var a=Object.getPrototypeOf(r);null!==a&&e(a,t,n,o)}else if("value"in i&&i.writable)i.value=n;else{var u=i.set;void 0!==u&&u.call(o,n)}return n},r.slicedToArray=function(){function e(e,r){var t=[],n=!0,o=!1,i=void 0;try{for(var a,u=e[Symbol.iterator]();!(n=(a=u.next()).done)&&(t.push(a.value),!r||t.length!==r);n=!0);}catch(e){o=!0,i=e}finally{try{!n&&u.return&&u.return()}finally{if(o)throw i}}return t}return function(r,t){if(Array.isArray(r))return r;if(Symbol.iterator in Object(r))return e(r,t);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}(),r.taggedTemplateLiteral=function(e,r){return Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(r)}}))},r.temporalRef=function(e,r,t){if(e===t)throw new ReferenceError(r+" is not defined - temporal dead zone");return e},r.temporalUndefined={},r.toArray=function(e){return Array.isArray(e)?e:Array.from(e)},r.toConsumableArray=function(e){if(Array.isArray(e)){for(var r=0,t=Array(e.length);r<e.length;r++)t[r]=e[r];return t}return Array.from(e)}}("undefined"==typeof global?self:global);</script>
<script>if (!window.customElements) { document.write('<!--'); }</script>
<script type="text/javascript" src="/bower_components/webcomponentsjs/custom-elements-es5-adapter.js"></script>
<!--! do not remove -->
<script src="/bower_components/webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="/src/build-test-app/build-test-app.html">
<build-test-app></build-test-app>
<!--! do not remove --> 部分不是开玩笑，它是确保编译后的代码在 ES6 环境中工作不可或缺的一部分。
除此之外，您还可以做很多事情来调整它以进行生产部署。我会研究 https://www.polymer-project.org/2.0/docs/tools/polymer-cli-commands#build and https://www.polymer-project.org/2.0/docs/tools/polymer-json 以更好地处理这个问题。