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

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

现在我有一个问题：

以下是我的代码： Index.cshtml：

指数

这是我的第一个-element.js：

从'@polymer/polymer/polymer element.js'导入{html，polymererelation}；
类FirstElement扩展了聚合关系{
静态获取模板（）{
返回html`
：主持人{
显示：块；
}
你好[[prop1]]！
`;
}
静态获取属性（）{
返回{
建议1：{
类型：字符串，
值：“第一个元素”，
},
};
}
}
定义（'first-element'，FirstElement）；

我通过cmd:polymer init创建了它，然后选择了元素模板。 当我在polymer的本地主机上运行polymer serve时，它工作了，所以我猜有一些构建过程正在进行。

---

提前谢谢。我希望我描述了所有内容。

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

来自“@polymer/…”

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

来自“@polymer/polymer/polymer element.js”

之后：

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

---

您可以在前面键入./node\u modules/以使用polymer build命令行工具跳过。

我尝试使用webpack和插件在polymer生成的html文件中进行字符串替换，但它似乎找不到该文件。也许有人更了解傅的网页可以解决其余的问题

// 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\'}/'
            }]
        }])
    ]
};

**编辑：2018年4月8日**

我已经明白了很多：

/// <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">'
        })
    ]
};

//
//webpack.config.js
var webpack=require（'webpack'）；
const path=require（'path'）；
const HtmlWebpackPlugin=require（'html-webpack-plugin'）；
const htmlwebpackstringresplaceplugin=require（'html-webpack-string-replace-plugin'）；
“严格使用”；
module.exports={
条目：{
main:“./”
},
输出：{
公共路径：“/”，
path:path.resolve（uu dirname，'wwwroot'），
文件名：“./dist/[name].bundle.js”
},
开发服务器：{
contentBase:“.”，
主机：“本地主机”，
港口：9000
},
模式：“发展”，
插件：[
新HtmlWebpackPlugin({
“模板”：“/path/to/index.html”，
“文件名”：“./path/to/Views/Shared/_PolymerLayout.cshtml”
}),
新的HtmlWebpackStringReplacePlugin({
“@webcomponents”：
“@Html.Raw”（@webcomponents”），
“%40webcomponents”：
“@Html.Raw”（@webcomponents”），
“%40聚合物”：
“@Html.Raw”（@polymer”），
“/node_modules/”：
“/path/to/node_modules/”，
“./src/path/to/polymer app”，
'':
“\r\n”
})
]
};

使用

@polymer

和

@webcomponents

的问题在于，在HTML页面中使用时，MVC试图将其视为web助手，但失败了。polymer cli不知道在构建时如何将

@polymer

替换为

@{“@polymer”}

。我找到的最接近解决方案是添加replace-in-file-webpack插件，并添加一条规则来更改字符串。然而，我在这方面没有太大的成功。

 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);

// 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\'}/'
            }]
        }])
    ]
};

/// <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">'
        })
    ]
};