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>

这是我的 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：聚合物初始化创建了这个，然后选择了元素模板。当我在聚合物的本地主机上通过聚合物服务运行时，它可以工作，所以我想有一些构建过程正在进行中。
提前致谢。我希望我描述了一切。

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

**编辑：2018年4月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">'
        })
    ]
};

Answer 2

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

来自“ @polymer /...”

Polymer 3具有“聚合物构建”命令，该命令会自动将路径转换为真实位置：之前：

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

之后：

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

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

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

2 个答案: