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

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

现在我有这个问题：

Uncaught TypeError：无法解析模块说明符“@ polymer / polymer / polymer-element.js” .
相对引用必须以“/”，“./”或“../”开头 .

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

2 回答

1

如果.js导入路径如下所示：

来自'@polymer / ......'

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

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

后：

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

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

回复于 2024-05-10T13:36:45+08:00

我试图使用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">'
        })
    ]
};

回复于 2024-05-10T13:36:45+08:00

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

2 回答

相关问题