编译后的jsx文件比原文件大
删除所有空间后,原始的JSX文件大小为189K.编译/缩小的文件大小JS为217K,没有任何依赖关系.我已经使用了所有WebPack/Babel优化来缩小除外的代码大小.我计划缩短成员变量/函数名称以减少文件大小,因为JS-Minify只能处理本地变量名称,例如用较短的名称代替React的Createlement.我只是手动尝试了,删除了创建元素后,文件大小减少了9K.不确定是否有任何工具可以帮助我这样做. 解决方案 您可以在WebPack中使用许多设置,以使输出尺寸较小.看起来您可能受到控制. 但是,捆绑尺寸将受您编写ES6代码和JSX的方式的影响.我汇编了
18 2024-04-05
编程技术问答社区
布尔道具在React中是如何使用的?
我试图澄清我对React中布尔道具的混乱. 假设a有MyComponent,带有几个布尔props prop1,prop2 ... 首先:看来布尔式道具就像其他人一样:您可以定义默认值,要么在 defaultprops或破坏参数: const MyComponent = ({ prop1, prop2 }) => ( ... ); MyComponent.defaultProps = { prop1: false, prop2: true, } 或(等效...我认为) const MyComponent = ({ prop1 = false, prop2 = true }) => ( ... ) 不清楚的是如何传递值.同样,自然的"反应风格"似乎是 ...包括静态文字(fals
10 2024-04-01
编程技术问答社区
Photoshop脚本-文件夹中的图像大小(对话框)。
我想知道是否有一种简单的方法可以在Photoshop中编写一个简单的脚本. 我希望它弹出一个对话框以让用户选择一个文件夹.然后,脚本在选定的一个中创建另一个文件夹(" Web_ready"),并将调整大小的图像放入其中.我可以很容易地处理调整大小的零件(网络上有很多教程),但是我不知道如何使用对话框弹出该部分.你能帮助我吗?我说的是 *.jsx脚本. 解决方案 文件夹选择对话框: var inputFolder = Folder.selectDialog("Select a folder to process"); 从文件夹中获取文件: var fileList = inputFolder.getFiles("*.JPG"); //Use whatever extension you want or no extension to select all files 用文件做点什么: for(var i=0; i
12 2024-03-29
编程技术问答社区
Reactjs控制台错误: 'Components对象已删除' 'ReferenceError: require未定义'。
我正在尝试将JSX与类一起使用,创建一个简单的Hello World程序来在我的浏览器(Firefox)中打印" Hello World". 我可以获得一个页面[html带有嵌入式JSX] [1]的工作.但是当我尝试使用课程时,不是. 我正在我的控制台输出中收到以下内容 Download the React DevTools for a better development experience: https://fb .me/react-devtools You might need to use a local HTTP server (instead of file://): https://fb .me/react-devtools-faq react-dom.development.js:21347:9 unreachable code after return statement[Learn More] babel.js:61389:2 You are using
8 2024-03-26
编程技术问答社区
无法在React组件中的let/var中存储箭头函数
i具有由扩展 react.component 定义的反应中的一个组件.其中以及渲染方法是: constructor(props, context) { super(props, context); this.state = { open: false, }; } handleClose = () => { //this works this.setState({open: false}); }; handleOpen = () => { //this works this.setState({open: true}); }; let empty = () => {}; // does not work, error Parsing error: Unexpected token 如果我将任何箭头函数都带有let or const,我似乎会遇到意外的令牌错误.我在这里错过了什么吗? 谢谢 解决
8 2024-03-26
编程技术问答社区
如何在React中传递数组作为道具而不被转换为字符串?
我正在开发一个带有反应的大学管理网站,可以用不同的语言显示.到目前为止,我已经开发了登录页面,请参阅代码(请注意,我正在使用 babel ): import React from 'react' import PropTypes from 'prop-types' import { fetchPopularRepos } from '../utils/api' function LanguagesNav ({ selected, onUpdateLanguage}) { const languages = ['EU', 'ES', 'EN'] return ( GAUR 2.0 {languages.map((language) =>
14 2024-03-26
编程技术问答社区
Webpack/React.js中的语法错误 在React中出现意外的token = { }
在我的一个.js文件中,我从WebPack中收到以下错误: 4 | export default function(ComposedComponent) { 5 | class Authentication extends Component { > 6 | static contextTypes = { | ^ 7 | router: React.PropTypes.object 8 | } 9 | 这些是我的dev依赖性: "devDependencies": { "babel-core": "^6.17.0", "babel-loader": "^6.2.0", "babel-plugin-transform-object-rest-spread": "^6.26.0", "babel-preset-env": "^1.6
18 2024-03-26
编程技术问答社区
客户端JSX转码
我想使用JSX创建React应用程序,而不必使用终端或任何服务器端/开发环境命令.我们正在使用的环境不允许在开发环境中运行命令,这些应用程序将纯粹在cdn上静态托管. 所以我知道我可以简单地包含babel的浏览器.完美的.我担心的是,Babel显然停止支持此事,而现代版本的Babel已将其删除.还有其他解决方案吗?是 babel-standalone 我应该使用什么? 我完全了解在生产中使用此功能的性能惩罚,但是我们的用例(我无法想象的是,在有许多出色且简单的在线HTML/JS IDE的用例中,这是不寻常的)./p> 解决方案 是的,如果您不想捆绑自己的文件,
12 2024-03-26
编程技术问答社区
如何创建你自己的babel处理器来替代`React'?
当您在JS文件中使用JSX时,您必须导入React,否则生成的代码不会编译.这是因为这是: import React from 'react' import ReactDOM from 'react-dom' function Foo() { return 'hello world' } ReactDOM.render(, document.body) 变为: import React from 'react' import ReactDOM from 'react-dom' function Foo() { return 'hello world' } ReactDOM.render(React.createElement(Foo), document.body) 因此,React.createElement中的React是由某些babel或webpack工具生成的,并且在我不记得的地方指定了它.我的问题首先是在哪里指定了将JSX转换为React
12 2024-03-26
编程技术问答社区
在HTML文件中,无法获得具有type =" text/jsx"的脚本标签的正确语言模式/IntelliSense
我有最新版本的Visual Studio代码(1.75.1).我正在使用"太阳化的深色"颜色主题. 我有一个html文件,带有react javascript代码内部标签. 如果我将语言选择作为" html",它在脚本标签中没有任何内容: 如果我使用" JavaScript React"或" Babel JavaScript"作为语言模式,我会获得错误的重点,而IntelliSense则无法正常工作: 我尝试将主题更改为dark+,但也没有改变. 为什么会发生这种情况? 解决方案 这是因为您将脚本标签中的type属性设置为"text/jsx"(这本质上没有错). 当前(在写作时,v1.75),VS代码仅支持javascript IntelliSense,用于脚本标签,no type属性,或type="module",type="module",type="text/javascript"或type="application/javascript",type
18 2024-03-26
编程技术问答社区
如何将React组件放在HTML字符串中?
我有: html字符串的数组,例如 我想在它们之间放置 (从而实现JSX中的布局: Hi ). 我该如何实现? 我尝试过: Babel.transform(' Hi ')(使用独立的babel).它确实有效,但要求我串行,它不是优雅的,并且可能会破裂. 使用常规JSX render() => ,然后,在componentDidMount上通过操纵DOM进行预先html,,但浏览器插入闭合标签会自动,所以我将获得 Hi 使用jsx-to-html库和innerHTML,将转换为html字符串,将其与 Hi 结合在一起
10 2024-03-26
编程技术问答社区
为什么我不能在JSX中以这种方式使用三元运算符和箭头函数?
使用babel-preset-react(编辑:babel版本:v6.26.0),以下表达式失败,错误" Invalid left-hand side in arrow function parameters"(try on babel repl ): true ? ("test") : x => 42 //FAILS, but only with `babel-preset-react` 但是,它的修改很小: true ? "test" : x => 42 //works fine 这两种情况都可以在似乎其他任何其他配置中都按预期工作. 这是一个错误吗?或者是JSX解析的一部分,导致这种情况发生吗? 解决方案 这是一个错误.我已经在Babel Github页面上创建了一个问题:其他解决方案 箭头功能的解析方式不同于常规的功能 请参阅 尽管箭头功能中的箭头不是操作员,但箭头 功能具有特殊的解析规则,与 与常规功能相比,操作员优
12 2024-03-26
编程技术问答社区
如何在 storybook 中配置 webpack,以允许 babel 在项目文件夹之外导入 react 组件
我能够成功地在Storybook项目文件夹中运行故事书并开发React组件.但是,我试图将包含我所有组件的文件夹移动一个级别(成为Storybook文件夹的兄弟姐妹). 这样而不是像这样的结构 storybook ├── components │ ├── Foo.js │ └── Bar.js ├── stories │ ├── index.stories.js 我有一个像这样的文件夹结构 my_example_project ├── my_components │ ├── Foo.js │ └── Bar.js ├── my_storybook │ ├── ... 当我尝试将组件导入故事时,我会收到以下错误 ERROR in ../my_components/Bar.js 4:9 Module parse failed: Unexpected token (4:9) You may need an appropriate loa
12 2024-03-26
编程技术问答社区
在Babel 7中包括一些node_modules目录
我在node_modules中具有依赖性,需要通过babel编译.升级我的堆栈后,我无法让Babel重新汇编. 当前版本: @babel/core 7.5.4 WebPack 2.7.0 webpack.config.js: const path = require('path'); module.exports = { devtool: 'cheap-module-source-map', context: path.resolve('resources/assets/js/'), entry: ['./index'], output: { path: path.resolve('public/js'), filename: 'index.js' }, module: { rules: [ { include
8 2024-03-26
编程技术问答社区
对React组件进行Jest测试。意外的令牌"<"
试图设置开玩笑来测试我的反应组件(从技术上讲我正在使用preact),但相同的想法... 每当我尝试获取覆盖范围报告时,我会遇到任何JSX语法时会出现错误. 错误 Running coverage on untested files...Failed to collect coverage from /index.js ERROR: /index.js: Unexpected token (52:2) 50 | 51 | render( > 52 | , | ^ 我已经尝试关注文档和类似问题,但没有运气! 好像我的公告bab着开玩笑没有使用. 任何想法如何摆脱错误? package.json 在 { "name": "tests", "version": "1.0.0", "description": "", "main": "Gallery
18 2024-03-26
编程技术问答社区
Sublime text 3中的React.js文件语法
我正在使用Sublime Text 3作为我的代码编辑器,我在React中写了一个基本的Hello World示例.但是,颜色在代码上是不适当的,我尝试安装Babel插件,但即使在那之后,颜色也没有似乎有效,正如您可以看到下面的图像 解决方案 仅安装它还不够,您还必须告诉Sublimetext使用它. 要么做 a) ctrl - shift - p ,键入" babel",然后选择 set senttax:javascript(babel) 或 b)转到菜单 view->语法 - >用当前扩展为...-> babel--> javascript(babel). . 其他解决方案 您可以按照以下步骤操作: - 将babel设置为默认语法 将其设置为特定扩展的默认语法: 用该扩展名打开文件, 从菜单中选择视图, 然后语法 - >用当前扩展为... - > babel-> javaScript(babel). 为每个扩展程序重复
24 2024-03-26
编程技术问答社区
对实验性的'jsx'的支持目前还没有启用。
所以我无休止地搜索了网络以解决此问题. "support for the experimental 'jsx' isn't currently enabled... Add @babel/preset-react to the 'presets' section of your Babel config to enable transformation. If you want to leave it as-is, add @babel/plugin-syntax-jsx to the 'plugins' section to enable parsing." 所以我有很多(100个)作为错误,所以我更改了我的.babelrc和.babel.config.js,看起来像: { test: /\.jsx?$/, exclude: [/node_modules/], use: [ { loader: 'babel-loader', options: {
12 2024-03-26
编程技术问答社区
在react native中从解析的对象数组中渲染图像源。
我正在构建一个React Native应用程序,该应用程序假设将一些"元数据"对象用作源.我要在数组中解析每个对象,并为每个item返回JSX布局.我唯一的问题是如何从图像中提供来源,因为我将它们存储在本地,并且需要require("link")它们.我的代码给我错误: function loadModuleImplementation(moduleId, module) { moduleId = "../../../images/icons/photographer/Party.png" 我的代码: class SelectScreen extends Component { props:Props; Details = [ { "type": "Party", "image": "../../../images/icons/photographer/Party.png" },
22 2024-03-26
编程技术问答社区