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

Question

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

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

例如：

示例-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>

转换为：

示例-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"
      }
    }
  });

Answer 1

保鲜盒随心所欲。

您可以在此处的 npm 上获取它：

crisper

Answer 2

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

--bundle-scripts: Combine all scripts to bundle.js

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

Automatic solution for move all in-line JS scripts to external files

javascript

html

webpack

polymer-1.0