polymer-webpack-loader
该加载器允许您编写混合的 HTML,CSS 和 JavaScript Polymer 元素,并仍然使用完整的 webpack 生态系统,包括模块捆绑和代码拆分。
加载器转换您的组件:
<link rel="import" href="./my-other-element.html">
->import './my-other-element.html';
<dom-module>
成为在运行时注册的字符串
<script src="./other-script.js"></script>
->import './other-script.js';
<script>/* contents */</script>
->/* contents */
那是什么意思?
任何不是外部链接且不以“ ,” 或一系列开头的<link>
“href”或<script>
“src”都将附加到值的开头。为了防止这种变化,使用下面的忽略链接选项。~/./.././
路径翻译
tag | import |
---|---|
<link rel="import" href="path/to/some-element.html"> | import "./path/to/some-element.html" |
<link rel="import" href="/path/to/some-element.html"> | import "/path/to/some-element.html" |
<link rel="import" href="../path/to/some-element.html"> | import "../path/to/some-element.html" |
<link rel="import" href="./path/to/some-element.html"> | import "./path/to/some-element.html" |
<link rel="import" href="~path/to/some-element.html"> | import "~path/to/some-element.html" |
配置加载程序
{
test: /\.html$/,
include: Condition(s) (optional),
exclude: Condition(s) (optional),
options: {
ignoreLinks: Condition(s) (optional),
ignorePathReWrite: Condition(s) (optional),
processStyleLinks: Boolean (optional),
htmlLoader: Object (optional)
},
loader: 'polymer-webpack-loader'
},
include: Condition(s)
请参阅 webpack 文档中的 Rule.include 和 Condition。与此选项匹配的路径将由 polymer-webpack-loader 处理。警告:如果此属性存在,加载器将只处理符合给定条件的文件。如果你的组件有一个<link>
指向一个组件(例如在另一个目录中),那么这个include
条件也必须匹配该目录。
exclude: Condition(s)
请参阅 webpack 文档中的 Rule.exclude 和 Condition。与这个选项匹配的路径将不被聚合物 webpack 加载器处理。注:通过导入的文件<link>
不会被此属性排除。看Options.ignoreLinks
。
选项
ignoreLinks: Condition(s)
<link>
指向符合这些条件的路径(请参阅webpack文档中的条件)将不会转换为import
s。
ignorePathReWrite: Condition(s)
<link>
匹配这些条件的路径(请参阅webpack文档中的条件)在转换为import
s 时不会更改。这可以用于尊重别名,加载器语法(例如markup-inline-loader!./my-element.html
)或模块路径。
processStyleLinks Boolean
如果设置为 true,则加载器将重写<link import="css" href="...">
或者<link rel="stylesheet" href="...">
位于 dom 模块内部<style>require('...')</style>
。这将允许文件由 webpack 配置中设置的加载器来处理它们的文件类型。
- 任何
<link>
在内部<dom-module>
但不在内部的内容<template>
都会被添加到<template>
标签在文件中出现的顺序中。<dom-module> <link rel =“stylesheet”href =“file1.css”> <template> <link rel =“stylesheet”href =“file2.css”> </ template> </ dom-module>会产生需要('file1.css')</ style> <style> require('file2.css')</ style> </ template> </ dom-module>
- 只有
<link>
当 href 是相对路径时,加载器才会替换。任何链接试图访问一个外部链接,即http
,https
或//
不会被取代。
htmlLoader: Object
传递给 html-loader 的选项。请参阅 html-loader。
与 Babel(或其他 JS 转译器)一起使用
如果您想要传输元素<script>
块的内容,则可以链接另外的加载器。
module: {
loaders: [
{
test: /\.html$/,
use: [
// Chained loaders are applied last to first
{ loader: 'babel-loader' },
{ loader: 'polymer-webpack-loader' }
]
}
]
}
// alternative syntax
module: {
loaders: [
{
test: /\.html$/,
// Chained loaders are applied right to left
loader: 'babel-loader!polymer-webpack-loader'
}
]
}
使用 HtmlWebpackPlugin
根据您如何配置 HtmlWebpackPlugin,您可能会遇到与 polymer-webpack-loader 的冲突。
例:
{
test: /\.html$/,
loader: 'html-loader',
include: [
path.resolve(__dirname, './index.html'),
],
},
{
test: /\.html$/,
loader: 'polymer-webpack-loader'
}
这会根据 html-loader 使用的进程将你的 index.html 文件暴露给 polymer-webpack-loader。在这种情况下,您需要从 polymer-webpack-loader中排除您的 html 文件,或者寻找其他方法来避免这种冲突。请参阅:html-webpack-plugin 模板选项
Shimming
并非所有聚合物元素都被编写为模块执行,并且需要更改才能使用 webpack。遇到的最常见问题是因为模块不在全局范围内执行。变量,函数和类将不再是全局的,除非它们被声明为全局对象(窗口)上的属性。
class MyElement {} // I'm not global anymore
window.myElement = MyElement; // Now I'm global again
对于外部库代码,webpack 提供匀场选项。
- 使用 exports-loader 将模块导出添加到期望符号为全局的组件。
- 脚本需要
this
引用关键字时使用 imports-loaderwindow
。
- 当脚本需要全局定义变量(但现在是模块导出)时,使用 ProvidePlugin 添加模块导入语句。
- 使用 NormalModuleReplacementPlugin 让 webpack 交换脚本的模块兼容版本。
您可能需要将多种匀场技术应用于相同的组件。
Boostrapping 您的应用程序
webcomponent polyfills 必须按特定顺序添加。如果您不延迟加载组件的主包,您将在浏览器控制台中看到以下例外情况:
Uncaught TypeError: Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function.
参考演示 html 文件以获取正确的加载顺序。
本文档系腾讯云开发者社区成员共同维护,如有问题请联系 cloudcommunity@tencent.com