Polymer 3 в другом проекте (например, ASP.NET MVC) - создавать повторно используемые компоненты (PolymerElements) - PullRequest
Новая
       13

Polymer 3 в другом проекте (например, ASP.NET MVC) - создавать повторно используемые компоненты (PolymerElements)

0 голосов
/ 24 мая 2018

Я пытаюсь создать и повторно использовать компоненты Polymer 3 в приложении ASP.NET MVC.Сейчас я не уверен, правильно ли я подхожу к этому вопросу.
Итак, во-первых, я хочу запустить все из 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: polym init изатем выбрал элемент шаблона.Когда я запускаю это через полимерную подачу на локальном хосте полимера, это работает, так что я думаю, что происходит какой-то процесс сборки.
Заранее спасибо.Я надеюсь, что я все описал.

Ответы [ 2 ]

0 голосов
/ 22 июля 2018

Я пытался заменить строку в html-файле, сгенерированном полимером, используя webpack и плагин, но, похоже, файл не найден.Может быть, кто-то более знающий в Webpack-фу сможет выяснить остальное. 

// 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">'
        })
    ]
};
0 голосов
/ 28 июня 2018

Если путь импорта .js начинается следующим образом:

из '@polymer /...'

У Polymer 3 есть команда "полимерная сборка", котораяавтоматически переводит путь в реальное местоположение: До:

из '@ Polymer / Polymer / Polymer-element.js';

После:

из "./node_modules/@polymer/polymer/polymer-element.js";

Вы можете напечатать ./node_modules/, чтобы пропустить, используя инструмент командной строки построения полимера.

...