似乎是一个真正愚蠢的问题，必须在某个地方有答案，但我已经搜索了几个小时但没有结果。我是 ReactJS 和使用 Webpack 构建的新手，一般来说是构建配置。我正在使用 Webpack 链接和捆绑我的整个项目，包括 ReactJS。它工作得很好，但我无法找到任何方法来使捆绑包不缩小，以便我可以在出现问题时进行调试。
这是我的 Webpack 配置：
var webpack = require('webpack');
var path = require('path');
var BUILD_DIR = path.resolve(__dirname, 'public/js');
var APP_DIR = path.resolve(__dirname, 'build-source/js');
var config = {
entry: APP_DIR + '\\main.js',
output: {
path: BUILD_DIR,
filename: 'build.js' // want this output file to end un-minified
},
module: {
loaders: [
{
test: /\.jsx?/,
include: APP_DIR,
loader: 'babel'
}
]
}
};
module.exports = config;
npm run dev我使用or运行捆绑执行，npm run build它调用我的 package.json 中的以下内容： …
我是Webpack,Visual Studio和Task Runner的新手,但这些是我被告知要在工作中安装/使用的,所以我正在努力弄清楚如何使它全部工作.我刚刚使用NPM全局安装webpack和webpack-cli的新副本.我将Task Runner插件安装到Visual Studio,并使用提供的Run> Development选项.神秘的是,我的唯一机器出现以下错误,没有人知道原因:
C:\Users\[me]\AppData\Roaming\npm\node_modules\webpack\bin\webpack.js:3
let webpackCliInstalled = false;
^^^
SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:373:25)
at Object.Module._extensions..js (module.js:404:10)
at Module.load (module.js:343:32)
at Function.Module._load (module.js:300:12)
at Function.Module.runMain (module.js:429:10)
at startup (node.js:139:18)
at node.js:999:3
Process terminated with code 1.
我正在使用最新版本的NodeJS和NPM.任何想法为什么未经修改的webpack下载会抛出块范围错误？
编辑:
我看到这个问题引起了一些关注,所以我想我应该提一下问题已经解决了.不幸的是,解决方案是完全卸载webpack和webpack-cli并重新安装它们.然后就行了.为什么...？谁知道？我听说其他人也遇到过这个问题,虽然我从第一次开始就没有复制过.
我开始使用ReactJS,NodeJS,Webpack和Facebook SDK进行用户身份验证.所有这些技术及其相关的软件工程原理/最佳实践对我来说都是相对较新的(即使JavaScript对我来说也是新手).
我按照这里的教程https://developers.facebook.com/docs/facebook-login/web进行了操作,我的Facebook身份验证工作得非常好!但是这个教程内容的结构方式,我认为SDK的设计只是为了期望FB状态响应处理程序包含在<body>标记内的原始页面HTML中.以下特别引用此:
// Load the SDK asynchronously
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
这种策略让我觉得不完美,很难与React组件集成.有没有办法从HTML重新定位Facebook登录/身份验证代码和Facebook状态更新处理程序,例如,通过Webpack与React代码捆绑在一起的脚本？可能吗？我的问题的部分原因是,如果我理解正确,我的Facebook状态更新处理程序能够更新我的React组件的状态,该处理程序需要成为组件的一部分才能访问相关的React组件this.setState(...)功能.
我是否正确地考虑过这个问题？
我第一次尝试为我的应用程序进行Facebook身份验证.我可以通过教程使其正常工作,我可以使用方便的Facebook登录按钮登录用户并将其注销,如Facebook SDK文档中的示例所示:
https://developers.facebook.com/docs/facebook-login/web
我喜欢使用这个按钮,因为它很容易,自动订阅Facebook品牌要求,并且因为它在用户登录时自动成为Facebook注销按钮.各方面都很完美.以下是按钮代码在自动注销时的外观:
<fb:login-button data-auto-logout-link="true" scope="public_profile" onlogin="checkLoginState();">
</fb:login-button>
看起来像肉汁,直到我在ReactJS页面中尝试它.
// From the tutorials
<script type='text/babel'>
var CommentBox = React.createClass({
render: function() {
return (
<div className="commentBox">
Hello, world! I am a CommentBox.<br />
// MY ADDITION ... it breaks
<fb:login-button data-auto-logout-link="true" scope="public_profile,email" onlogin="checkLoginState();">
</fb:login-button>
</div>
);
}
});
ReactDOM.render(
<CommentBox />,
document.getElementById('content')
);
</script>
我也尝试过这样:
ReactDOM.render(
<fb:login-button data-auto-logout-link="true" scope="public_profile,email" onlogin="checkLoginState();"></fb:login-button>,
document.getElementById('loginbutton')
);
我不能以这种方式包含FB SDK登录按钮,因为它说"JSX不是XML".我觉得很公平.
有没有办法在React页面中包含这个方便的按钮,还是只需要创建一个自定义的FB按钮？我认为这似乎是一个常见的用例,因为Facebook给了我们React,我很惊讶我找不到更方便地使用这个解决方案的方法.(制作自定义按钮不是世界末日,但我想知道是否有更好/更简单的方法.)
试图帮助一个项目的朋友。由于客户的需求，他们被迫使用两个相互冲突的第三方CSS库。例如，库A定义了一个名为的类.active，库B也定义了一个名为的类.active。您可以看到哪里可能出错。
一种解决方案是进入并手动重命名一个或另一个库中的类，但是这对我来说似乎很笨拙，以防万一将来进行维护的任何人都尝试使用原始第三方库的完整版本等问题。而且，冲突的数量尚不知道，但被认为很大。由于这些原因，命名间隔不太可行。
我个人的解决方案是为该项目投放自己的CSS，并为其适当地命名空间。但这听起来像客户端拒绝这样做，并要求他们使用两个CSS库，而无须他们共享它们的特定原因。
由于我们不受任何一个库的控制，是否还有其他技巧可以将HTML元素与一个或另一个库隔离？例如，是否有一种方法可以告诉元素接受给定类的CSS样式，但只能来自特定的.css文件？我在这里伪造语法，但是类似：
<div class="myStyles.css[active]">styled content</div>
简而言之，我正在使用 Jest、React 测试库和 Material UI createMuiTheme，除测试外，一切正常。只有当我从createMuiTheme.
我正在为我的 MUI 项目创建一个自定义主题，如下所示：
import { createMuiTheme } from '@material-ui/core/styles';
export const theme = {
palette: {
extra: {
activeButton: '#D4564E',
black: '#000000',
darkGrey: '#232323',
rgbaInvisible: 'rgba(0, 0, 0, 0)',
success: '#4CAF50',
white: '#FFFFFF',
},
},
};
export default createMuiTheme(theme);
我的组件样式在 JSS 中定义如下：
const useStyles = makeStyles((theme) => {
return {
ctaCopy: {
color: theme.extraColors.activeButton,
},
};
});
我认为组件本身并不重要，但它看起来像这样：
<Link className={classes.ctaCopy} href={ctaUrl}>
{ctaCopy}
</Link>
这有效。组件在呈现时正确显示，具有预期的颜色。然而，当我在 Jest 测试中使用这个组件时，它失败了，说：
TypeError: …我找到了具有类似标题的其他线程，但在这些线程中找不到适合我的解决方案。
我试图通过将相等的宽度/高度与 border-radius:50% 相结合来生成完美的圆形输入标签，但边缘会出现像素化。我已经尝试了宽度/高度的各种像素值（偶数和奇数），但问题仍然存在。
如何让圆圈变得完美？
我有一个 ReactJS 组件，<textarea>里面有一个 HTML。
已预先填充<textarea>属性value（见下文...我正在生成一个链接供用户复制）。
我想自动选择<textarea>内容，这样用户复制文本会更方便。我正在尝试在 ReactcomponentDidMount调用中执行此操作。它有效......有点。
据我所知，该组件的安装速度非常缓慢，即使componentDidMount已经被调用，该过程仍在进行中。我这么说的原因是：如果我myTextarea.select()直接在内部调用componentDidMount，100% 都会失败。但是，如果我拨打.select()电话setTimeout(...)，让它在尝试选择内容之前稍等一下，那么它100% 都能正常工作。
编辑/注意：经过一番探索后，我发现一些观点表明，用于setTimeout(...)此目的的做法是不好的做法，所以现在我更加渴望避免使用它。
我可能会缺少什么，有没有更好的方法来实现这一点？
这就是我所拥有的。
这个版本失败了。
var GenerateLinkUi = React.createClass({
componentDidMount: function() {
document.getElementById('cyoag-generated-link-textarea').select();
},
render: function () {
return (
<div id='cyoag-generate-link-ui'>
<textarea readOnly id='cyoag-generated-link-textarea' value={config.hostDomain + 'link?id=' + this.props.nodeUid} />
</div>
);
}
});
这个版本成功了。
var GenerateLinkUi = React.createClass({
componentDidMount: function() {
setTimeout(function(){ …我有一个package.json文件设置如下：
...,
"scripts": {
"start": "node index.js",
"test": "mocha"
},
...
所以我试图用 来运行它npm start。不幸的是，它给了我以下错误输出：
npm[7444]: src\node_file.cc:1599: Assertion `args[1]->IsInt32()' failed.
1: 00007FF75D44121A v8::internal::GCIdleTimeHandler::GCIdleTimeHandler+4810
2: 00007FF75D41A5B6 node::MakeCallback+4518
3: 00007FF75D41A66F node::MakeCallback+4703
4: 00007FF75D3DF663 uv_loop_fork+34595
5: 00007FF75DC45782 v8::internal::OptimizingCompileDispatcher::Unblock+60562
6: 00007FF75DC46C1D v8::internal::OptimizingCompileDispatcher::Unblock+65837
7: 00007FF75DC45C79 v8::internal::OptimizingCompileDispatcher::Unblock+61833
8: 00007FF75DC45B5B v8::internal::OptimizingCompileDispatcher::Unblock+61547
9: 000002E4183DC5C1
npm ERR! code ELIFECYCLE
npm ERR! errno 134
npm ERR! c4sk@1.0.0 start: `node index.js`
npm ERR! Exit status 134
npm ERR!
npm ERR! Failed at the c4sk@1.0.0 start script.
npm ERR! …我正在尝试在我的备注中包含一个URL,如下例所示.这会导致StyleCop根据规则SA1650(备注中拼写错误的单词)报告警告,这对于我们的目的无法抑制(通过策略).这个警告并不奇怪,因为URL语法不要求正确的英文拼写.
...
/// <remarks>
/// <para>... some remarks ...</para>
/// <para>http://www.foo.wtvr.com</para>
/// <para>... some other remarks ...</para>
/// </remarks>
...
首先,在摘要/备注中包含URL被认为是不好的做法吗？我猜不会因为Visual Studio识别链接并使它们可以点击.如有必要,我会删除它,但我想留下其他人的参考.
如果这不被认为是不好的做法,是否有办法让StyleCop忽略URL文本而不抑制警告(或将整个URL或其中的每一部分添加到已识别的单词列表中)？我尝试了以下(URL的行上有四个正斜杠),但结果是来自规则SA1644的警告(文档标题中不允许空行):
...
/// <remarks>
/// <para>... some remarks ...</para>
//// <para>http://www.foo.wtvr.com</para>
/// <para>... some other remarks ...</para>
/// </remarks>
...
我目前的解决方案是使用注释中的注释标记,如下所示,它不会产生任何警告,但我不知道这是否是最佳做法:
...
/// <remarks>
/// <para>... some remarks ...</para>
/// <para><!--http://www.foo.wtvr.com--></para>
/// <para>... some other remarks ...</para>
/// </remarks>
...
帮助我更好地记录我的代码.