将所有内联 JS 脚本移动到外部文件的自动解决方案答案

【问题标题】：Automatic solution for move all in-line JS scripts to external files将所有内联 JS 脚本移动到外部文件的自动解决方案
【发布时间】：2019-03-09 13:14:56
【问题描述】：

我将聚合物 1 上的 WebApp 打包到 chrome 扩展，其中不允许内联 js 脚本。

是否有任何现成的自动解决方案（例如 webpack 插件）可以将嵌入 HTML 文件中的所有 js 脚本移动到单独的文件中并进一步连接。

例如：

example-view.html:

<dom-module id="editable-name-tag">
<template>
    <p>This is <strong>{{owner}}</strong>'s editable-name-tag.</p>
    <input is="iron-input" bind-value="{{owner}}"
  placeholder="Your name here...">
</template>
<script>
  Polymer({
    is: "editable-name-tag",
    properties: {
      owner: {
        type: String,
        value: "Daniel"
      }
    }
  });
</script>
</dom-module>

转换为：

example-view.html:

<dom-module id="editable-name-tag">
<template>
    <p>This is <strong>{{owner}}</strong>'s editable-name-tag.</p>
    <input is="iron-input" bind-value="{{owner}}"
  placeholder="Your name here...">
</template>
<script src="script.js"></script>
</dom-module>

和script.js：

Polymer({
    is: "editable-name-tag",
    properties: {
      owner: {
        type: String,
        value: "Daniel"
      }
    }
  });

【问题讨论】：

这就是它的作用：npmjs.com/package/crisper
@Michael Updike，谢谢。如果您发布它作为答案，我会选择这个

标签： javascript html webpack polymer-1.0

【解决方案1】：

保鲜盒可以满足您的需求。

你可以在这里的 npm 上获得它：

crisper

【讨论】：

【解决方案2】：

忘记分享信息。我将此功能添加到官方 Polymer 1.x 工具中：Vulcanize:

--bundle-scripts：将所有脚本合并到bundle.js

【讨论】：