Tag: create react app
如何单独加载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 […]
