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

Question

我正在尝试在 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>

这是我的第一个-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 然后选择了元素模板。当我运行通过 polymer 服务在 polymer 的本地主机上时，它起作用了，所以我猜有一些构建过程正在进行。
提前致谢。我希望我描述了一切。

Answer 1

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

from '@polymer/...'

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

from '@polymer/polymer/polymer-element.js';

之后：

from "./node_modules/@polymer/polymer/polymer-element.js";

可以在前面输入./node_modules/跳过使用polymer构建命令行工具

Answer 2

我尝试使用 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\'}/'
            }]
        }])
    ]
};

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

我明白了这么多：

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

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

Polymer 3 in other project (like ASP.NET MVC) - create reusable components (PolymerElements)

javascript

asp.net

asp.net-mvc

polymer

asp.net-core-mvc