Question

[已从此问题中删除过时的编辑文件。]

修改

由于我没有收到任何回复，我开始怀疑我的问题的可能原因来自于嵌套mixin的错误使用，这在以前的聚合物2下工作没有问题。下面是更完整的编辑我的实际插图文件。希望我能得到一些帮助。

档案 base-mixin.js

/*
This annotation aims to get rid of warnings.
https://www.polymer-project.org/3.0/docs/tools/documentation#class-mixins

@polymer
@mixinFunction
@mixinClass
*/
BaseMixin=(BaseClass) => class extends BaseClass{
    static get properties(){
        return {
            p1:"v1"
        };
    }
}

档案 child-mixin.js

import "./base-mixin.js";
/*
@polymer
@mixinFunction
@mixinClass
*/
ChildMixin=(BaseClass) => class extends BaseMixin(BaseClass){
    static get properties(){
        return {
            p2:"v2"
        };
    }
    p2p1(){
        return this.p2+this.p1;
    }
}

文件 my-app.js

import {ChildMixin} from './child-mixin.js';
class MyApp extends ChildMixin(PolymerElement){
    connectedCallback(){
        super.connectedCallback();
        console.log(this.p1,this.p2,this.p2p1());
    }
}

编辑2

我已从此邮件中删除了原始编辑文件，以避免混淆。然后我添加以下文件以使该项目完成。

文件 index.html

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <base href="/">
        <title>Polymer 3 - Mixin</title>
        <script src="./node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
        <script src="./src/my-app.js" type="module"></script>
    </head>
    <body>
        <my-app>Mixin</my-app>
    </body>
</html>

文件 polymer.json - 生产版本：

{
    "entrypoint":"index.html"
    ,"shell":"src/my-app.js"
    ,"sources":[
        "favicon.ico"
        ,"src/**/*"
    ]
    ,"extraDependencies":[
        "node_modules/@polymer/**/*"
        ,"node_modules/@webcomponents/webcomponentsjs/**"
    ]
    ,"lint":{
        "rules":["polymer-3"]
    }
    ,"builds":[
        {
            "preset":"es5-bundled"
            ,"addServiceWorker": false
        }
    ]
    ,"moduleResolution":"node"
    ,"npm":true
}

在 polymer.json “生产版本”上的

命令聚合物构建除了在目录构建中 polymer.json 之外什么都不会产生 STRONG>。在构建过程中不会打印任何警告或错误。

文件 polymer.json - 开发版本：

{
    "entrypoint":"index.html"
    ,"shell":"src/my-app.js"
    ,"sources":[
        "favicon.ico"
        ,"src/**/*"
    ]
    ,"extraDependencies":[
        "node_modules/@polymer/**/*"
        ,"node_modules/@webcomponents/webcomponentsjs/**"
    ]
    ,"lint":{
        "rules":["polymer-3"]
    }
    ,"builds":[
        { 
            "name": "dev",
            "addServiceWorker": false,
            "js": {"minify": false, "compile": false},
            "css": {"minify": false},
            "html": {"minify": false},
            "bundle": false,
            "addPushManifest": false
        }
    ]
    ,"moduleResolution":"node"
    ,"npm":true
}

在 polymer.json “开发版本”上的

命令聚合物构建会在目录构建中生成所有预期的文件，并显示以下警告：

[cli.command.build]    Clearing build/ directory...
[cli.build.build]    (dev) Building...
Could not resolve module specifier "@polymer/paper-menu-button/paper-menu-button.js" in file "/var/www/test/mixin/node_modules/@polymer/iron-list/demo/grouping.html_script_13.js".
Could not resolve module specifier "google-youtube/google-youtube.js" in file "/var/www/test/mixin/node_modules/@polymer/app-route/demo/youtube-demo/youtube-lite.js".
[BABEL] Note: The code generator has deoptimised the styling of undefined as it exceeds the max of 500KB.
[BABEL] Note: The code generator has deoptimised the styling of undefined as it exceeds the max of 500KB.

阅读使用 polymer.json “开发版”构建的 index.html ，浏览器的控制台显示此错误：

Uncaught ReferenceError: ChildMixin is not defined
    at child-mixin.js:27
    at f ((index):10)
    at (index):10
    at h ((index):10)
    at (index):10
    at i ((index):10)
    at i ((index):10)
    at (index):10
    at a ((index):10)
    at c ((index):10)

编辑3

Polymer project at GitHub

回答了这个问题

Polymer 3 mixins的正确导出语法是什么？

0 个答案: