Articles of create react app

Create-React-App如何导入目录中的所有SCSS文件?

我正尝试使用create-react-app将一个Ruby on Rails应用程序移植到Node.js,但是我有点卡在从指定目录中预处理.scss文件。 我有一个像这样的结构:src / css / styles.scss和src / css / app /目录,其中包含一些自定义的scss文件。 所有的input都在styles.scss里面。 他们来了: @import 'customvars'; @import 'tooltipster-sideTip-punk.min'; @import 'tooltipster.bundle.min'; @import "./app/*"; 我安装了node-sass-chokidar,所以scss处理得很好,但是一旦它进入一个目录(在这种情况下,应用程序),我得到这个错误: {“status”:1,“file”:“D:/Dropbox/WebStorm/project_incognito/src/css/styles.scss”,“line”:4,“column”:1,“message”:“要导入的文件找不到或无法读取:./app/ 。\ n父级样式表:D:/Dropbox/WebStorm/project_incognito/src/css/styles.scss“, “格式化”:“错误:要导入的文件不存在或不可读:./app/ 。\ n父types表:D:/Dropbox/WebStorm/project_incognito/src/css/styles.scss \ n在src / c ss / styles.scss \ n >> @import \“./ app / * \”; \ n ^ \ n“} 我做了一些Googlesearch,发现这个解决scheme: https : //www.npmjs.com/package/import-glob-loader […]

如何单独加载ES6模块(根据需要)又名。 树在摇晃吗?

现在我正在通过我的应用程序,改变这种模式的实例: import {Grid, Row, Col} from 'react-bootstrap' 成: import {Grid, Row, Col} from '../react-bootstrap' 其中react-bootstrap.js是一个简单的文件在我的项目的根目录,有select地导入我需要从NPM包的ES6模块: import Grid from 'react-bootstrap/es/Grid' import Col from 'react-bootstrap/es/Col' import Row from 'react-bootstrap/es/Row' export {Grid, Col, Row} 这样做的一些包,我可以减less我的包文件大小超过50%。 有没有一个WebPack模块或插件可以自动执行任何包? 如果这个转换(也就是只在包中包含明确导入的内容,而不是整个库)recursion地应用于整个包树,我敢打赌,我们会看到显着的尺寸差异。 编辑:正如Swivel指出的那样,这被称为Tree Shaking ,并且应该由Webpack 3+自动执行,UglifyJSPlugin包含在我正在使用的react-scripts的生产configuration中 。 我不确定这是否是这两个项目中的一个bug,但是通过手动进行select性导入,我看到了很大的收益,如果正在执行Tree Shaking,情况就不是这样。

代理客户端请求通过create-react-app和webpack dev服务器将应用程序反馈给服务器

尝试为客户端应用程序创build服务器端API。 客户端完全写在反应。 在开发中使用端口3000上的webdevserver。服务器正在侦听端口3001.我已经添加代理到客户端应用程序的package.json文件,如下所示: { "name": "client", "version": "0.1.0", "private": true, "devDependencies": { "react-scripts": "0.8.5" }, "dependencies": { "react": "^15.4.2", "react-dom": "^15.4.2", "react-router": "^3.0.2", "superagent": "^3.4.1" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test –env=jsdom", "eject": "react-scripts eject" }, "proxy": "http://localhost:3001/" } 但是一旦我要求服务器API失败: import Request from 'superagent'; export function searchTasks(text, callback) { […]

用Moment JS创buildReact-App:找不到模块“./locale”

刚刚在我的web应用程序上运行了一个npm update ,现在Moment JS似乎失败,并显示以下消息: Error: Cannot find module "./locale" \node_modules\moment\src\lib\moment\prototype.js:1 > 1 | import { Moment } from './constructor'; 不知道我的更新之前我有什么版本的Moment JS ,但我的应用程序已经工作了几个月。 我创build了另一个反应应用程序,并运行了一个npm install moment –save并修改了源代码以显示时间,并以上述相同的错误结束。 不知道是否有一个无法通过使用Create-React-App来集成Moment JS的方法,但是我真的不想这样做。 其他人看到这些问题或成功? 如果是这样,一个简短的写法会帮助你。

在WebStorm中创build反应应用程序

我正在尝试使用npm软件包“create-react-app”开始使用WebStorm的反应项目。 我已经运行npm install -g create-react-app来全局安装这个软件包,并且可以通过命令行(比如create-react-app <proj name> )完美地使用这个软件包。 但是,当在WebStorm中创build项目并使用全局“create-react-app”包(使用npm list -gfind)的path时,会遇到以下错误: /usr/bin/node /usr/local/lib/node_modules/create-react-app/index.js . /usr/local/lib/node_modules/create-react-app/createReactApp.js:589 .filter(file => !validFiles.includes(file)); ^ TypeError: validFiles.includes is not a function at /usr/local/lib/node_modules/create-react- app/createReactApp.js:589:33 at Array.filter (native) at isSafeToCreateProjectIn (/usr/local/lib/node_modules/create- react-app/createReactApp.js:589:6) at createApp (/usr/local/lib/node_modules/create-react- app/createReactApp.js:147:8) at Object.<anonymous> (/usr/local/lib/node_modules/create-react- app/createReactApp.js:134:1) at Module._compile (module.js:410:26) at Object.Module._extensions..js (module.js:417:10) at Module.load (module.js:344:32) at Function.Module._load (module.js:301:12) […]

设置代理服务器创build反应的应用程序

我已经使用create-react-app启动了一个反应应用程序,并运行了npm run eject脚本来访问所有文件。 我之后安装了express并创build了与package.json文件位于同一级别的server.js文件 这些是server.js文件的内容: const express = require('express'); const app = express; app.set('port', 3031); if(process.env.NODE_ENV === 'production') { app.use(express.static('build')); } app.listen(app.get('port'), () => { console.log(`Server started at: http://localhost:${app.get('port')}/`); }) 这里没有什么疯狂的,只是设置了未来的API代理,我需要使用秘密,因为我不想暴露我的API。 在此之后,我添加了一个"proxy": "http://localhost:3001/"到我的package.json文件。 我现在卡住,因为我需要弄清楚如何正确启动我的服务器,并使用此开发模式server.js文件,然后在生产。 理想情况如果我们可以使用更多的代理ie /api和/api2 ,那也是一件/api2

React Routing工作在本地而不是Heroku

如果这个问题与本文所概述的不完全一样,我的问题就非常相似。 不幸的是,我无法使用它提供的策略来解决它。 所以这里是我自己的细节: 我正在使用创buildReact应用程序 , 反应路由器4 , Express和Heroku,并按照这里的说明build立与CRA的服务器。 在本地,我可以访问诸如myapp/about路线,但在build立并推送到heroku之后,这些404。 我可以通过UI导航到这条路线(例如,通过点击将路线推入history的菜单项),但是仅使用浏览器的地址栏无法导航到此路线。 此外,当我使用用户界面进行导航时,我没有看到与路线相关的任何networking活动,例如/about请求。 然而,当我改变地址栏,然后按回车,这产生了一个networking请求到上述路线。 以下是我的代码中的一些select片段: app.js <Switch> <Route exact path="/about" component={About} /> <Route path="/" render={props => <coolListContainer {…props}/>} /> </Switch> server.js if (process.env.NODE_ENV === 'production') { app.use(express.static('client/build')); } //…what some of my api routes look like: app.route('/api/verify') .post( async (req, res) => { try { await db.verifyCode(req.body) […]

npm用create-react-app启动错误

我有一个项目,我没有接触2个星期。 我拿回来,现在当我尝试运行npm start我得到这个错误。 > react-scripts start sh: react-scripts: command not found npm ERR! Darwin 16.0.0 npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "start" npm ERR! node v6.7.0 npm ERR! npm v3.10.3 npm ERR! file sh npm ERR! code ELIFECYCLE npm ERR! errno ENOENT npm ERR! syscall spawn npm ERR! UpScore@0.6.0 start: `react-scripts start` npm ERR! spawn ENOENT […]