我创建了一个React应用程序,服务器端和客户端共享相同的package.json
:
├───build
│ └───static
│ ├───css
│ ├───js
│ └───media
├───server (backend code)
├───src (client code)
├───package.json (shared)
我的问题很简单,来自package.json
的所有包都包含在最终的生产React构建中吗?
例如,我使用express
作为服务器,它包含在React构建中吗?
如果是这样,有什么方法可以避免吗?或者我选择了一个错误的体系结构?
编辑:
im使用create-react-app
,默认模式
3条答案
按热度按时间aurhwmvo1#
否 *(一般情况下)。
最流行的react构建工具使用webpack(或其他做类似事情的捆绑包). Webpack接收一些“入口点文件路径”,从那些入口点抓取依赖项.然后webpack将所有内容打包成一个输出文件(或一组文件,取决于设置)。
如果您没有从任何前端文件导入express,它就不会进入bundle。
20jt8wwn2#
我不确定是否要为您的Express和React应用程序合并package.json,我看不出这样做有什么好处,因为React使用Webpack,合并Express服务器可能会打乱一些默认设置,我将与您分享我是如何做到这一点的。
在开发构建中,您将有2个独立运行的应用程序,create-react-app和node/express服务器将彼此独立运行,它们将有自己独立的package.json。
但是在生产环境中,您将在React应用上运行npm run build,它将作为express服务器上的静态文件提供。
我已经实现了这两种方案,您可以在此处查看
开发构建版本:https://github.com/iqbal125/react_hooks_fullstack_skeleton
生产构建:https://github.com/iqbal125/react-prod9
tkclm6bt3#
Previously answered,根据
Webpack
文档,Webpack从entry point开始生成一个dependency graph,通常是index.js
.另外,如果你使用像create-react-app
这样的东西,它会生成一个包json,如下所示:您可以看到没有
devDependencies
!这意味着并非您刚刚放在dependencies
上的所有内容都将包含在您的最终构建中。最后,我已经测试了一个新的
CRA
我的应用程序:1.在已安装的裸计算机上按
npm run build
:1.通过
npm i axios
安装axios,但从未导入。运行npm run build
后的输出:什么都没有改变!
1.从"axios"中导入axios,但不要在代码中使用它:
以下是输出:
同样没有任何变化!但是你也可以看到
eslint
警告!1.使用其函数之一,例如get method only:
输出:
如果我们不在应用中使用软件包,它就不会进入最终构建版本。
虽然额外的包不会影响生产,但不要忘记不时地卸载未使用的包。运行npm install仍然会安装package.json中定义的每个包,无论它们是否被使用。因此,加载未使用的包会减慢部署速度,并影响您的队友(他们也需要运行npm install!!)。
Reference