webpack - webpack 可以像聚合物 cli 一样工作吗？

Question

我正在研究 Lit element 和 Material Design Component(MDC)。

对于 MDC，我必须像入门所说的那样使用 webpack-dev-server。

但是对于 Lit 元素，我必须使用Polyemr cli，因为 Polymer Cli 可以按名称导入库。

像这样。

  import { LitElement, html } from '@polymer/lit-element';

所以我正在寻找可以使用 webpack 按名称导入聚合物的方法。或者我如何使用 Polymer cli 使用 MDC。

你能给我一些建议吗？

Answer 1

LitElement works just fine with webpack. The only thing you need to do is configure it to also compile it's source.

In most webpack configs you will have something like this

module: {
    rules: [
        {
            test: /\.js$/,
            use: "babel-loader",
            exclude: /node_modules/
        }
    ]
},

But if you replace it with something like this

module: {
    rules: [
        {
            test: /\.js$/,
            use: "babel-loader",
            exclude: (modulePath) => {
                return (
                    /node_modules/.test(modulePath) &&
                    !/node_modules\/lit-html/.test(modulePath) &&
                    !/node_modules\/lit-element/.test(modulePath)
                )
            },
        }
    ]
},

Then it will also be transpiled and should work just fine.