我遇到了一些麻烦,让这个WebComponents polyfill+native-shim在所有设备上都能正常工作,尽管WebPack。
关于我的设置的一些背景:*Webpack2+babel-6*应用程序是用ES6编写的,转换到ES5*导入一个用ES6编写的node_module
包,它定义/注册应用程序中使用的customElement
因此相关的webpack开发人员配置如下所示:
const config = webpackMerge(baseConfig, {
entry: [
'webpack/hot/only-dev-server',
'@webcomponents/custom-elements/src/native-shim',
'@webcomponents/custom-elements',
'<module that uses CustomElements>/dist/src/main',
'./src/client',
],
output: {
path: path.resolve(__dirname, './../dist/assets/'),
filename: 'app.js',
},
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
options: {
cacheDirectory: true,
},
include: [
path.join(NODE_MODULES_DIR, '<module that uses CustomElements>'),
path.join(__dirname, '../src'),
],
},
],
},
...
键取方式:*我需要在<使用CustomElements>
的模块>之前加载CustomElements>*我需要在我的应用程序源之前加载<使用CustomElements>
的模块,所以我们要转换它(因此包含在Babel-Loader
中)。
然而,在现代ES6浏览器(即桌面Chrome浏览器)中,上述功能与预期的一样有效
它在较旧的浏览器中不起作用。我在较旧的浏览器(例如iOS 8)中遇到以下错误:
SyntaxError: Unexpected token ')'
指向native-shim PollyFill中的打开匿名函数:
(() => {
'use strict';
// Do nothing if `customElements` does not exist.
if (!window.customElements) return;
const NativeHTMLElement = window.HTMLElement;
const nativeDefine = window.customElements.define;
const nativeGet = window.customElements.get;
因此在我看来,native-shim
需要传输到ES5:
include: [
+ path.join(NODE_MODULES_DIR, '@webcomponents/custom-elements/src/native-shim'),
path.join(NODE_MODULES_DIR, '<module that uses CustomElements>'),
path.join(__dirname, '../src'),
],
app.js:1 Uncaught TypeError: Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function.
at new StandInElement (native-shim.js:122)
at HTMLDocument.createElement (<anonymous>:1:1545)
at ReactDOMComponent.mountComponent (ReactDOMComponent.js:504)
at Object.mountComponent (ReactReconciler.js:46)
at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:371)
at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258)
at Object.mountComponent (ReactReconciler.js:46)
at Object.updateChildren (ReactChildReconciler.js:121)
at ReactDOMComponent._reconcilerUpdateChildren (ReactMultiChild.js:208)
at ReactDOMComponent._updateChildren (ReactMultiChild.js:312)
..它将我带到native-shim中的constructor()
行:
window.customElements.define = (tagname, elementClass) => {
const elementProto = elementClass.prototype;
const StandInElement = class extends NativeHTMLElement {
constructor() {
呵。所以我很不清楚我们是如何在基于webpack的构建中包含这一点的,其中使用CustomElements的依赖关系是ES6(并且需要Transspilling)。
{
"presets": [
["es2015", { "modules": false }],
"react"
],
"plugins": [
"transform-custom-element-classes",
"transform-object-rest-spread",
"transform-object-assign",
"transform-exponentiation-operator"
],
"env": {
"test": {
"plugins": [
[ "babel-plugin-webpack-alias", { "config": "./cfg/test.js" } ]
]
},
"dev": {
"plugins": [
"react-hot-loader/babel",
[ "babel-plugin-webpack-alias", { "config": "./cfg/dev.js" } ]
]
},
"dist": {
"plugins": [
[ "babel-plugin-webpack-alias", { "config": "./cfg/dist.js" } ],
"transform-react-constant-elements",
"transform-react-remove-prop-types",
"minify-dead-code-elimination",
"minify-constant-folding"
]
},
"production": {
"plugins": [
[ "babel-plugin-webpack-alias", { "config": "./cfg/server.js" } ],
"transform-react-constant-elements",
"transform-react-remove-prop-types",
"minify-dead-code-elimination",
"minify-constant-folding"
]
}
}
}
我能够通过下面的.babelrc
插件管道实现类似的功能。看起来只有https://babeljs.io/docs/plugins/transform-es2015-classs/和https://babeljs.io/docs/plugins/transform-es2015-classs/,但我真的不记得它们具体解决了什么问题:
{
"plugins": [
"transform-runtime",
["babel-plugin-transform-builtin-extend", {
"globals": ["Error", "Array"]
}],
"syntax-async-functions",
"transform-async-to-generator",
"transform-custom-element-classes",
"transform-es2015-classes"
]
}
我创建了一个AWS代码管道,它分四个阶段运行。1) 来自github的源代码,2)将后端部署到Elastic Beanstalk,3)使用Codebuild构建前端代码(使用下面的buildspec文件),以及4)将webpack的结果部署到S3。 到目前为止,除了第三阶段的结果外,一切都按预期进行。Codebuild似乎将工件设置为源文件,而不是webpack构建的结果。在bucket和文件夹中
问题内容: 我对文档的理解 我看到Babel 6目前具有三个预设:es2015,react和stage-x。我读到我可以像这样设置它们: 或直接在package.JSON中,如下所示: 我可以进一步将babel-loader与webpack结合使用,如下所示: 我的问题 因此,为了将所有内容都编译得井井有条,我在Webpack配置中添加了刚刚更新为与Babel6配合使用的内容: 现在,当我 没有
我看到巴别塔6现在有三个预设:es2015,反应和阶段x。我读到我可以在中设置这些: 或者直接包装。像这样: 我可以将babel loader与以下网页一起使用: 因此,为了编译一切漂亮和干净,我添加了,它刚刚更新为与Babel6一起工作,到webpack配置如下: 现在,当我编译没有在根或预设选项设置在,即只有在webpack配置中设置了Babel-loader es2015预设的情况下,我才会
我是webpack的新手,我需要参与设置以生成源地图。我正在从命令行运行,该命令已成功编译。但我真的需要源地图。这是我的。 我对webpack很陌生,虽然这些文档并没有真正起到帮助,但我不确定这个问题具体是什么。
当我使用API远程触发作业时,jenkins上的作业会说:“由远程主机IP启动”。但我的工作可能会因不同的原因和不同的来源而触发,所以如果我在詹金斯能看到一份工作并直接看到触发的原因,那就太好了。 我知道我可以传递一个字符串参数,然后在每个作业中查看参数-但这不是很明显。我希望在所有工作的列表中看到它。类似于:。 有什么办法可以做到这一点吗? 我注意到我们的发布作业采用了一个显示我想要的版本参数—
问题内容: 我是webpack的新手,我发现在生产版本中我们可以减少整体代码的大小。目前,webpack构建大约8MB的文件,而main.js构建大约5MB的文件。如何减少生产构建中的代码大小?我从互联网上找到了一个样本webpack配置文件,并为我的应用程序进行了配置,然后运行并开始构建它,并在目录中生成了一些文件。 这些文件仍然很重(与开发版本相同) 如何使用这些文件?目前,我正在使用webp