其他项目中的 Polymer 3（如 ASP.NET MVC） - 创建可重用组件（PolymerElements）答案

【问题标题】：Polymer 3 in other project (like ASP.NET MVC) - create reusable components (PolymerElements)其他项目中的 Polymer 3（如 ASP.NET MVC） - 创建可重用组件（PolymerElements）
【发布时间】：2018-05-24 10:17:02
【问题描述】：

我正在尝试在 ASP.NET MVC 应用程序中创建和重用 Polymer 3 组件。现在我不确定我是否正确地解决了这个问题。
首先，我想从 IIS express 运行所有内容。

现在我有这个问题：

Uncaught TypeError: Failed to resolve module specifier "@polymer/polymer/polymer-element.js".
Relative references must start with "/", "./", or "../".

这是我的代码： Index.cshtml：

    <head>
    <script src="~/Scripts/PolymerApp/node_modules/@("@webcomponents")/webcomponentsjs/webco
       mponents-loader.js"></script>
       <script type="module" src="~/Scripts/PolymerApp/first-element.js">
       </script>
    </head>

    <h2>Index</h2>
    <div>
        <first-element></first-element>
    </div>

这是我的 first-element.js：

 import {html, PolymerElement} from '@polymer/polymer/polymer-element.js';

class FirstElement extends PolymerElement {
  static get template() {
    return html`
      <style>
        :host {
          display: block;
        }
      </style>
      <h2>Hello [[prop1]]!</h2>
    `;
  }
  static get properties() {
    return {
      prop1: {
        type: String,
        value: 'first-element',
      },
    };
  }
}

window.customElements.define('first-element', FirstElement);

我通过 cmd: polymer init 创建了它，然后选择了元素模板。当我通过聚合物本地主机上的聚合物服务运行它时，它可以工作，所以我想有一些构建过程正在进行。
提前致谢。我希望我描述了一切。

【问题讨论】：

标签： javascript asp.net asp.net-mvc polymer asp.net-core-mvc

【解决方案1】：

我尝试使用 webpack 和插件在聚合物生成的 html 文件中进行字符串替换，但似乎找不到该文件。也许对 Webpack-fu 更了解的人可以弄清楚其余部分。

// webpack.config.js
var webpack = require('webpack');
const ReplaceInFileWebpackPlugin = require('replace-in-file-webpack-plugin');

"use strict";

module.exports = {
    entry: {
        main: '/'
    },
    output: {
        filename: "./wwwroot/dist/[name].bundle.js",
        publicPath: "/temp/"
    },
    devServer: {
        contentBase: ".",
        host: "localhost",
        port: 9000
    }, mode: "development",
    plugins: [
        new ReplaceInFileWebpackPlugin([{
            dir: './path/to/polymer-built-app/build/default/',
            test: /\.html$/,
            rules: [{
                search: '/@webcomponents/',
                replace: '/@{\'@webcomponents\'}/'
            }]
        }])
    ]
};

**编辑：08/04/2018 **

我已经想通了：

/// <binding BeforeBuild='Run - Development' />
// webpack.config.js
var webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackStringReplacePlugin = require('html-webpack-string-replace-plugin');

"use strict";

module.exports = {
    entry: {
        main: './'
    },
    output: {
        publicPath: '/',
        path: path.resolve(__dirname, 'wwwroot'),
        filename: "./dist/[name].bundle.js"
    },
    devServer: {
        contentBase: ".",
        host: "localhost",
        port: 9000
    },
    mode: "development",
    plugins: [
        new HtmlWebpackPlugin({
            "template": "./path/to/index.html",
            "filename": "../path/to/Views/Shared/_PolymerLayout.cshtml"
        }),
        new HtmlWebpackStringReplacePlugin({
            '@webcomponents':
                '@Html.Raw("@webcomponents")',
            '%40webcomponents':
                '@Html.Raw("@webcomponents")',
            '%40polymer':
                '@Html.Raw("@polymer")',
            '/node_modules/':
                '/path/to/node_modules/',
            './src/path/to/polymer-app',
            '<!-- See google short url -->':
                '<!-- See google short url -->\r\n<base href="/custom/base/ref">'
        })
    ]
};

【讨论】：

【解决方案2】：

如果 .js 导入路径是这样开始的：

来自“@polymer/...”

Polymer 3 有一个命令“polymer build”，可以自动将路径转换为真实位置：之前：

来自'@polymer/polymer/polymer-element.js'；

之后：

来自“./node_modules/@polymer/polymer/polymer-element.js”；

您可以使用聚合物构建命令行工具在前面键入 ./node_modules/ 以跳过。

【讨论】：

使用 @polymer 和 @webcomponents 的问题在于，当在 Razor cshtml 页面中使用时，MVC 试图将其视为 Web 帮助程序并失败。聚合物 cli 在构建时不知道如何将 @polymer 替换为 @{"@polymer"}。我找到解决方案的最接近方法是添加 replace-in-file-webpack-plugin 并添加一条规则来更改字符串。但是，我并没有取得太大的成功。