Search code examples
javascripthtmlwebpackpolymer-1.0

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


I do packaging WebApp on polymer 1 to chrome extension, where not allowed in-line js scripts.

Are there any ready-made auto solutions (webpack plugin for example) for move all js scripts embedded in HTML files into a separate file with their further connection.

Like example:

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>

Convert to:

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>

and script.js:

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

Solution

  • Forgot to share information. I added this feature to official Polymer 1.x tool: Vulcanize:

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