如何让 babel-loader 忽略我的动态 URL
How to make babel-loader ignore my dynamic URL
我有一个动态 URL 从我们的服务器抓取图像标签中的图像，当被 babel-loader 处理时会抛出错误。
这是一些被抛出的错误消息，因此我知道它是专门来自 babel-loader 的：
Error: ./src/browser/app/sideNav/SideNavItems.js
Module parse failed: /Users/.../path/to/local-site/node_modules/babel-loader/lib/index.js??ref--3!/Users/.../path/to/local-site/src/browser/app/sideNav/SideNavItems.js Unexpected token (188:132)
You may need an appropriate loader to handle this file type.
这是动态的URL:
const imageUrl = `/web/company/${companyID}/user/${userID}/logo`;
这是 SideNavItems.js 中抛出错误的 JSX：
185 const ClientLogoListItem = () =>
186 <ListItem style={inlineStyles.topListItem} disabled>
187 {isEmpty(logo)
188 ? <CompanyLogoDefault key="sideNavDefaultLogo" justifyContent="center" />
189 : <CompanyLogo key="sideNavLogo" logo={logo} justifyContent="center" />}
190 </ListItem>;
如果我像我在此处显示的那样替换 <CompanyLogo /> 组件，构建将成功完成：
const ClientLogoListItem = () =>
<ListItem style={inlineStyles.topListItem} disabled>
{isEmpty(logo)
? <CompanyLogoDefault key="sideNavDefaultLogo" justifyContent="center" />
: <div>hey</div>}
</ListItem>;
所以它必须是 <CompanyLogo /> 组件中的某些东西，这让我相信它是动态的 URL。但是在用有效的 FPO 图像 url (http://fpoimg.com/300x250?text=Preview) 替换动态 URL 之后，它仍然在同一位置失败。
CompanyLogo.js
// @flow
import React from 'react';
// Helper functions
import { isNil } from 'lodash';
/**
* CompanyLogo component
*/
type CompanyLogoProps = {
logo: Object,
justifyContent: String,
};
const inlineStyles = {
clientLogo: {
height: 59,
width: 246,
maxWidth: '145px',
},
homeLink: {
display: 'flex',
},
};
const CompanyLogo = ({ logo, justifyContent }: CompanyLogoProps) => {
let companyID = 0;
let userID = 0;
if (!isNil(logo)){
companyID = !isNil(logo.companyId) ? logo.companyId : 0;
userID = !isNil(logo.userId) ? logo.userId : 0;
}
// const imageUrl = `/web/company/${companyID}/user/${userID}/logo`;
// const imageUrl = '/web/company/' + companyID + '/user/' + userID + '/logo';
const imageUrl = 'http://fpoimg.com/300x250?text=Preview';
return (
<a
href="/"
style={{
...inlineStyles.homeLink,
justifyContent: justifyContent,
}}
>
<img
alt="Company Logo"
src={imageUrl}
style={{
...inlineStyles.clientLogo,
backgroundColor: '#fff',
}}
/>
</a>
)
};
我认为在这里使用排除 属性 没有意义，因为我不想排除转译整个文件，我只需要它来忽略这个动态 URL。
我也在使用 url-loader，但这似乎不是这个图像 src 有问题的加载器，否则我会认为它会在 运行 该加载程序时被捕获。
为了更清楚而编辑
为了让每个人都知道，我不只是启动应用程序并进行设置。它已经 运行 投入生产几个月了，并且已经正确地呈现了一堆不同的页面。我正在假设我如何能够通过忽略这个 URL 来解决这个问题，这就是为什么我问是否有可能这样做。这是否应该能够通过加载程序的规则似乎没有什么不合适的，这就是为什么我想我现在可能只需要选择退出加载程序检查。但我可能正在考虑这个错误，只需要找出根本原因而不是试图解决它。
这是我的 .babelrc 文件，我使用的是 Este 样板，因此服务器正在生成初始标记，因此这是服务器的 .babelrc。
{
"presets": ["env", "react", "stage-1"],
"plugins": [
["transform-runtime", {
"helpers": false,
"polyfill": false,
"regenerator": false,
}],
],
"env": {
"production": {
"plugins": [
"transform-react-constant-elements"
]
}
}
}
还有错误消息的其余部分，不确定是否应该添加它：
Error: ./src/browser/app/sideNav/SideNavItems.js Module parse failed: `/Users/.../path/to/local-site/node_modules/babel-loader/lib/index.js??ref--3!/Users/.../path/to/local-site/src/browser/app/sideNav/SideNavItems.js Unexpected token (188:132) You may need an appropriate loader to handle this file type.`
| _react2.default.createElement('div',{__source:
{fileName:_jsxFileName,lineNumber:188}},'hey');var SideNavItems=function SideNavItems((_temp=_ref,_ref3=
| <_CompanyLogo2.default key="sideNavLogo"logo={logo}justifyContent="center"/>,_temp)){var _temp,_ref3;var config=_ref.config,currNavRoute=_ref.currNavRoute,intl=_ref.intl,logo=_ref.logo,router=_ref.router;var buildListItems=function buildListItems(nodes){if(Array.isArray(nodes)){return nodes.map(function(node){var children=node.children,displayName=node.displayName,link=node.link,foundLink=node.foundLink,topLevel=node.topLevel,leftIcon=node.leftIcon;var keyName=(0,_functions.transformForId)(displayName.defaultMessage);var childrenDefined=!(0,_isNil3.default)(children);var linkDefined=!(0,_isNil3.default)(link);var foundLinkDefined=!(0,_isNil3.default)(foundLink);var topLevelDefined=!(0,_isNil3.default)(topLevel);var childrenArray=[];var isSelected=false;var iconFillColor=_defaultTheme2.default.colors.primary;if(!(0,_isNil3.default)(node.coveredRoutes)){if((0,_some3.default)(node.coveredRoutes,(0,_method3.default)('includes',(0,_toUpper3.default)(currNavRoute)))){isSelected=true;iconFillColor='#fff';}}var listItemStyle=_extends({},inlineStyles.listItem);if(isSelected){inlineStyles.listItemSelected.backgroundColor=_defaultTheme2.default.colors.primary;listItemStyle=_extends({},inlineStyles.listItemSelected);}if(!(0,_isNil3.default)(node.backgroundColor)){inlineStyles.nestedListStyle=_extends({},inlineStyles.nestedListStyle,{backgroundColor:node.backgroundColor});}if(childrenDefined){childrenArray=(0,_values3.default)(children);}return _react2.default.createElement(_List.ListItem,_extends({nestedListStyle:inlineStyles.nestedListStyle,style:listItemStyle,key:'sideNavListItem-'+keyName,primaryText:_react2.default.createElement('div',{style:topLevelDefined?inlineStyles.primaryTextTopLevel:inlineStyles.primaryTextChildren,__source:{fileName:_jsxFileName,lineNumber:148}},intl.formatMessage(displayName))},childrenDefined&&{primaryTogglesNestedList:true,nestedItems:buildListItems(childrenArray)},linkDefined&&{value:link,href:link},foundLinkDefined&&{value:foundLink,onClick:function onClick(){return router.push(foundLink);}},topLevelDefined&&{leftIcon:_react2.default.createElement(_SideNavIcons.SideNavIcons,{iconName:leftIcon,fillColor:iconFillColor,__source:{fileName:_jsxFileName,lineNumber:174}})},{__source:{fileName:_jsxFileName,lineNumber:143}}));});}return _react2.default.createElement(_LoadingSpinner2.default,{key:'sideNavLoadingSpinner',style:inlineStyles.loadingSpinner,__source:{fileName:_jsxFileName,lineNumber:182}});};var ClientLogoListItem=function ClientLogoListItem(){return _react2.default.createElement(_List.ListItem,{style:inlineStyles.topListItem,disabled:true,__source:{fileName:_jsxFileName,lineNumber:186}},(0,_isEmpty3.default)(logo)?_ref2:_ref3);};
|
@ ./src/browser/app/sideNav/SideNav.js 16:18-43
@ ./src/browser/app/App.js
@ ./src/browser/router/routeConfig.js
@ ./src/browser/app/Root.js
@ ./src/browser/main.js
@ ./src/browser/index.js
@ multi ./src/browser/index.js
npm ERR! Darwin 16.7.0
npm ERR! argv "/Users/tylerandersen/.nvm/versions/node/v6.10.0/bin/node" "/Users/tylerandersen/.nvm/versions/node/v6.10.0/bin/npm" "run" "html"
npm ERR! node v6.10.0
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! CompanyName@ html: `gulp to-html --production`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the CompanyName@ html script 'gulp to-html --production'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the CompanyName package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! gulp to-html --production
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs CompanyName
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls CompanyName
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! /Users/.../path/to/local-site/npm-debug.log
好吧，修复最终没有多大意义，我最终需要尝试理解它起作用的原因，但现在通过更改以下内容构建可以正常工作：
此代码：
185 const ClientLogoListItem = () =>
186 <ListItem style={inlineStyles.topListItem} disabled>
187 {isEmpty(logo)
188 ? <CompanyLogoDefault key="sideNavDefaultLogo" justifyContent="center" />
189 : <CompanyLogo key="sideNavLogo" logo={logo} justifyContent="center" />}
190 </ListItem>;
改为：
const logoComponent = isEmpty(logo)
? <CompanyLogoDefault key="sideNavDefaultLogo" justifyContent="center" />
: <CompanyLogo key="sideNavLogo" logo={logo} justifyContent="center" />;
const ClientLogoListItem = () =>
<ListItem style={inlineStyles.topListItem} disabled>
{logoComponent}
</ListItem>;
因此，通过提取内联 JSX 三元，它现在可以通过 babel-loader 错误。一定是我的 babel-loader (^6.2.0) 版本不喜欢的东西。我什至将其更改为 7.0.0 版，但在此更改之前它仍然抛出相同的错误。
我有一个动态 URL 从我们的服务器抓取图像标签中的图像，当被 babel-loader 处理时会抛出错误。
这是一些被抛出的错误消息，因此我知道它是专门来自 babel-loader 的：
Error: ./src/browser/app/sideNav/SideNavItems.js Module parse failed: /Users/.../path/to/local-site/node_modules/babel-loader/lib/index.js??ref--3!/Users/.../path/to/local-site/src/browser/app/sideNav/SideNavItems.js Unexpected token (188:132) You may need an appropriate loader to handle this file type.
这是动态的URL:
const imageUrl = `/web/company/${companyID}/user/${userID}/logo`;
这是 SideNavItems.js 中抛出错误的 JSX：
185 const ClientLogoListItem = () =>
186 <ListItem style={inlineStyles.topListItem} disabled>
187 {isEmpty(logo)
188 ? <CompanyLogoDefault key="sideNavDefaultLogo" justifyContent="center" />
189 : <CompanyLogo key="sideNavLogo" logo={logo} justifyContent="center" />}
190 </ListItem>;
如果我像我在此处显示的那样替换 <CompanyLogo /> 组件，构建将成功完成：
const ClientLogoListItem = () =>
<ListItem style={inlineStyles.topListItem} disabled>
{isEmpty(logo)
? <CompanyLogoDefault key="sideNavDefaultLogo" justifyContent="center" />
: <div>hey</div>}
</ListItem>;
所以它必须是 <CompanyLogo /> 组件中的某些东西，这让我相信它是动态的 URL。但是在用有效的 FPO 图像 url (http://fpoimg.com/300x250?text=Preview) 替换动态 URL 之后，它仍然在同一位置失败。
CompanyLogo.js
// @flow
import React from 'react';
// Helper functions
import { isNil } from 'lodash';
/**
* CompanyLogo component
*/
type CompanyLogoProps = {
logo: Object,
justifyContent: String,
};
const inlineStyles = {
clientLogo: {
height: 59,
width: 246,
maxWidth: '145px',
},
homeLink: {
display: 'flex',
},
};
const CompanyLogo = ({ logo, justifyContent }: CompanyLogoProps) => {
let companyID = 0;
let userID = 0;
if (!isNil(logo)){
companyID = !isNil(logo.companyId) ? logo.companyId : 0;
userID = !isNil(logo.userId) ? logo.userId : 0;
}
// const imageUrl = `/web/company/${companyID}/user/${userID}/logo`;
// const imageUrl = '/web/company/' + companyID + '/user/' + userID + '/logo';
const imageUrl = 'http://fpoimg.com/300x250?text=Preview';
return (
<a
href="/"
style={{
...inlineStyles.homeLink,
justifyContent: justifyContent,
}}
>
<img
alt="Company Logo"
src={imageUrl}
style={{
...inlineStyles.clientLogo,
backgroundColor: '#fff',
}}
/>
</a>
)
};
我认为在这里使用排除 属性 没有意义，因为我不想排除转译整个文件，我只需要它来忽略这个动态 URL。
我也在使用 url-loader，但这似乎不是这个图像 src 有问题的加载器，否则我会认为它会在 运行 该加载程序时被捕获。
为了更清楚而编辑
为了让每个人都知道，我不只是启动应用程序并进行设置。它已经 运行 投入生产几个月了，并且已经正确地呈现了一堆不同的页面。我正在假设我如何能够通过忽略这个 URL 来解决这个问题，这就是为什么我问是否有可能这样做。这是否应该能够通过加载程序的规则似乎没有什么不合适的，这就是为什么我想我现在可能只需要选择退出加载程序检查。但我可能正在考虑这个错误，只需要找出根本原因而不是试图解决它。
这是我的 .babelrc 文件，我使用的是 Este 样板，因此服务器正在生成初始标记，因此这是服务器的 .babelrc。
{
"presets": ["env", "react", "stage-1"],
"plugins": [
["transform-runtime", {
"helpers": false,
"polyfill": false,
"regenerator": false,
}],
],
"env": {
"production": {
"plugins": [
"transform-react-constant-elements"
]
}
}
}
还有错误消息的其余部分，不确定是否应该添加它：
Error: ./src/browser/app/sideNav/SideNavItems.js Module parse failed: `/Users/.../path/to/local-site/node_modules/babel-loader/lib/index.js??ref--3!/Users/.../path/to/local-site/src/browser/app/sideNav/SideNavItems.js Unexpected token (188:132) You may need an appropriate loader to handle this file type.`
| _react2.default.createElement('div',{__source:
{fileName:_jsxFileName,lineNumber:188}},'hey');var SideNavItems=function SideNavItems((_temp=_ref,_ref3=
| <_CompanyLogo2.default key="sideNavLogo"logo={logo}justifyContent="center"/>,_temp)){var _temp,_ref3;var config=_ref.config,currNavRoute=_ref.currNavRoute,intl=_ref.intl,logo=_ref.logo,router=_ref.router;var buildListItems=function buildListItems(nodes){if(Array.isArray(nodes)){return nodes.map(function(node){var children=node.children,displayName=node.displayName,link=node.link,foundLink=node.foundLink,topLevel=node.topLevel,leftIcon=node.leftIcon;var keyName=(0,_functions.transformForId)(displayName.defaultMessage);var childrenDefined=!(0,_isNil3.default)(children);var linkDefined=!(0,_isNil3.default)(link);var foundLinkDefined=!(0,_isNil3.default)(foundLink);var topLevelDefined=!(0,_isNil3.default)(topLevel);var childrenArray=[];var isSelected=false;var iconFillColor=_defaultTheme2.default.colors.primary;if(!(0,_isNil3.default)(node.coveredRoutes)){if((0,_some3.default)(node.coveredRoutes,(0,_method3.default)('includes',(0,_toUpper3.default)(currNavRoute)))){isSelected=true;iconFillColor='#fff';}}var listItemStyle=_extends({},inlineStyles.listItem);if(isSelected){inlineStyles.listItemSelected.backgroundColor=_defaultTheme2.default.colors.primary;listItemStyle=_extends({},inlineStyles.listItemSelected);}if(!(0,_isNil3.default)(node.backgroundColor)){inlineStyles.nestedListStyle=_extends({},inlineStyles.nestedListStyle,{backgroundColor:node.backgroundColor});}if(childrenDefined){childrenArray=(0,_values3.default)(children);}return _react2.default.createElement(_List.ListItem,_extends({nestedListStyle:inlineStyles.nestedListStyle,style:listItemStyle,key:'sideNavListItem-'+keyName,primaryText:_react2.default.createElement('div',{style:topLevelDefined?inlineStyles.primaryTextTopLevel:inlineStyles.primaryTextChildren,__source:{fileName:_jsxFileName,lineNumber:148}},intl.formatMessage(displayName))},childrenDefined&&{primaryTogglesNestedList:true,nestedItems:buildListItems(childrenArray)},linkDefined&&{value:link,href:link},foundLinkDefined&&{value:foundLink,onClick:function onClick(){return router.push(foundLink);}},topLevelDefined&&{leftIcon:_react2.default.createElement(_SideNavIcons.SideNavIcons,{iconName:leftIcon,fillColor:iconFillColor,__source:{fileName:_jsxFileName,lineNumber:174}})},{__source:{fileName:_jsxFileName,lineNumber:143}}));});}return _react2.default.createElement(_LoadingSpinner2.default,{key:'sideNavLoadingSpinner',style:inlineStyles.loadingSpinner,__source:{fileName:_jsxFileName,lineNumber:182}});};var ClientLogoListItem=function ClientLogoListItem(){return _react2.default.createElement(_List.ListItem,{style:inlineStyles.topListItem,disabled:true,__source:{fileName:_jsxFileName,lineNumber:186}},(0,_isEmpty3.default)(logo)?_ref2:_ref3);};
|
@ ./src/browser/app/sideNav/SideNav.js 16:18-43
@ ./src/browser/app/App.js
@ ./src/browser/router/routeConfig.js
@ ./src/browser/app/Root.js
@ ./src/browser/main.js
@ ./src/browser/index.js
@ multi ./src/browser/index.js
npm ERR! Darwin 16.7.0
npm ERR! argv "/Users/tylerandersen/.nvm/versions/node/v6.10.0/bin/node" "/Users/tylerandersen/.nvm/versions/node/v6.10.0/bin/npm" "run" "html"
npm ERR! node v6.10.0
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! CompanyName@ html: `gulp to-html --production`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the CompanyName@ html script 'gulp to-html --production'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the CompanyName package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! gulp to-html --production
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs CompanyName
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls CompanyName
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! /Users/.../path/to/local-site/npm-debug.log
好吧，修复最终没有多大意义，我最终需要尝试理解它起作用的原因，但现在通过更改以下内容构建可以正常工作：
此代码：
185 const ClientLogoListItem = () =>
186 <ListItem style={inlineStyles.topListItem} disabled>
187 {isEmpty(logo)
188 ? <CompanyLogoDefault key="sideNavDefaultLogo" justifyContent="center" />
189 : <CompanyLogo key="sideNavLogo" logo={logo} justifyContent="center" />}
190 </ListItem>;
改为：
const logoComponent = isEmpty(logo)
? <CompanyLogoDefault key="sideNavDefaultLogo" justifyContent="center" />
: <CompanyLogo key="sideNavLogo" logo={logo} justifyContent="center" />;
const ClientLogoListItem = () =>
<ListItem style={inlineStyles.topListItem} disabled>
{logoComponent}
</ListItem>;
因此，通过提取内联 JSX 三元，它现在可以通过 babel-loader 错误。一定是我的 babel-loader (^6.2.0) 版本不喜欢的东西。我什至将其更改为 7.0.0 版，但在此更改之前它仍然抛出相同的错误。