同构反应与Webpack的resolve.root选项
我的React应用程序使用需要相对于我的JS文件的根,使用Webpack的resolve.root。 即我的文件结构包含以下内容:
components App.react.js containers AppContainer.react.js
在AppContainer.react.js中,我有:
import App from 'components/App.react';
这在客户端工作。 现在我试图使它是同构的。 如果我在我的server.js需要AppContainer.react.js,它说components/App.react
没有find。 节点正试图要求containers/components/App.react.js
,它不存在。 我怎样才能使Node相对于给定的目录?
编辑:我的目录结构如下所示:
css/ html/ js/ components/ App.react.js containers/ AppContainer.react.js main.js <- requires AppContainer public/ server/ server.js <- requires AppContainer
你可以使用https://github.com/halt-hammerzeit/universal-webpack 。 这将让你保持你的相同的webpackconfiguration(例如。resolve.root和任何别名),另外也帮助你走向服务器端渲染。 使用文档给出了一个很好的例子,说明如何启动和运行。
你可以尝试使用这个babel-plugin: babel-plugin-module-resolver
,
然后更改您的.babelrc如下所示:
{ "plugins": [ ["module-resolver", { "root": ["."], "alias": { "components": "./components" } }] ] }
那么你可以要求你的组件在你的server.js中import App from 'components/App.react';
你有没有尝试过
import App from '../components/App.react';
你的server.js文件在哪里? 如果它与“容器”文件夹位于同一个目录中,则可以执行./components/App.react
。
否则,你可以使用..
回到你需要find你的文件。
Examples (relative to server.js): ./ -> current directory ../ -> up one directory ../../ -> up two directories etc..
根据你的目录结构..
import App from '../js/containers/AppContainer.react';
是你想要的。
- 使用webpack,我可以将Node.js和浏览器代码放在同一个文件中,但阻止Node.js代码将其传送到浏览器?
- Webpack-dev-server和isomorphic react-node应用程序
- React – 服务器端组件呈现
- 警告:React试图在容器中重用标记,但校验和无效
- 在同构React应用程序中呈现HTMLstring
- 包含package.json文件失败时使用webpack
- (React)与webpack同构的webapp的服务器部分,包括CSS的样式加载器
- 从React(同构应用程序)进行API调用时出现“Access-Control-Allow-Origin”问题
- 如何利用节点后端的浏览器库