使用 package.json 一起运行节点服务器和 webpack [英] Run node server and webpack together using package.json

问题描述

通过学习这个视频，我已经完成了 todo 应用:

I have completed todo app by learning from this video:

超级 MEAN 堆栈教程:Angular、Node/Express、Webpack、MongoDB、SASS、Babel/ES6、Bootstrap

在 19:18 时间在 这个 网址的视频中，有人告诉我我如果我想在 windows 中使用 npm run dev 运行它，应该在单独的 git-bash 实例中使用以下两个命令:

In that video at time 19:18 at this url it is taught that I should use the below two commands in seperate git-bash instances if I want to run it in windows using npm run dev:

node server
webpack-dev-server --progress --colors

但是在 Linux(或除 Windows 之外的任何其他操作系统)中，您可以使用此脚本:

But in Linux (or any other OS than windows) you can use this script:

"Scripts": {
    "start": "NODE_PATH=$NODE_PATH:./src node server",
    "dev": "npm start & webpack-dev-server --progress --colors"
}

那么，有什么办法可以在 Windows 中做同样的事情吗?

So, Is there any way I can do the same in windows?

另外，在那个教程中我可以看到那个端口号.3000 分配给节点服务器，但由于使用开发依赖项，他在浏览器中运行 localhost:8080.您可以在此处看到.教程完成后，我跟随并创建了该应用程序.现在我想部署它.所以，我首先想学习在非开发依赖模式下运行测试我的网站.即当我在浏览器中输入 localhost:3000 时，我的应用程序应该可以成功运行.那么，有人可以解释一下具体步骤吗?

Also, In that tutorial I can see that port no. 3000 is assigned to node server, but due to using dev dependencies he runs the localhost:8080 in browser. You can see that here. After the tutorial finishes, I followed along and created that app. Now I would like to deploy it. So, I would first like to learn to run test my site in non-dev dependencies mode. i.e. when I type localhost:3000 in browser, my app should run successfully. So, can anybody explain the steps for that?

更新:

我是 node.js 的新手.我在 node 上看了很多视频，并试图从中学到一些东西.在所有视频中，我看到我在端口号上运行节点服务器.3000 然后我在浏览器中输入 localhost:3000 .现在最后我观看了关于他使用 webpack 的平均堆栈的视频.现在，我很困惑.我认为有两台服务器正在运行.第一个服务器是 webpack 的服务器，第二个服务器是 node 的服务器.直到今天，我在浏览器中输入了 localhost:3000，因为我在代码中提到节点将使用端口 3000.但是现在在视频中，他在浏览器中运行 localhost:8080.这意味着使用了 webpack 的服务器.然后节点服务器发生了什么.为什么我不能只运行 localhost:3000?在视频中还解释了 webpack 是一个开发依赖项.所以，我认为在应用程序完成并准备好部署后，我的项目可以在节点服务器上运行(通过对代码进行一些更改，我不确定).让我们举个例子.现在我不想将应用程序部署到真正的服务器.我希望在我朋友的电脑上运行相同的应用程序.他不是开发人员.所以，他不应该依赖 webpack，因为 webpack 是一个开发依赖项.因此，他应该能够在节点服务器而不是 webpack 的服务器上运行应用程序.因此，他应该输入 localhost:3000 而不是 localhost:8080.这就是我不明白的地方.

I am a newbie in node.js. I watched many videos on node and tried to learn something from that. In all the videos I see that I run node server on port no. 3000 and then I type localhost:3000 in my browser. Now lastly I watched video about mean stack in which he uses webpack. Now, I am confused. I think there are two servers running. first server is webpack's server and second server is node's server. Upto today I typed localhost:3000 in my browser because I mentioned that port 3000 will be used by node in my code. But now in the video he is running localhost:8080 in browser. It means webpack's server is used. Then what happened to node server. Why can't I just run localhost:3000? Also in the video it is explained that webpack is a dev dependency. So, I think after the app is completed and ready to be deployed, my project can be run on the node server (by making some changes to the code, I am not sure). Let's take an example. Now I don't want to deploy the app to a real server. I want the same app to run on my friend's pc. He is not a developer. So, he should not depend on webpack as webpack is a dev dependency. So, he should be able to run the app on node server instead of webpack's server. So, he should type localhost:3000 instead of localhost:8080. That's what I don't understand.

推荐答案

让我们分解一下:

1. 如果你定义了这个脚本:

1. If you've defined this script:

"Scripts": {
    "start": "NODE_PATH=$NODE_PATH:./src node server",
    "dev": "npm start & webpack-dev-server --progress --colors"
}

... 那么这个 npm 命令:npm run dev

... 实际上调用了这两个操作:

... actually invokes these two actions:

a) npm start & # 在后台运行 NPM

a) npm start & # Runs NPM in the background

b) webpack-dev-server --progress --colors # 在前台并发运行 webpack

b) webpack-dev-server --progress --colors # Concurrently runs webpack in the foreground

您可以使用 Windows 以多种方式完成相同的事情，从一个简单的 .bat 文件开始，如下所示:

You can accomplish the same thing in many ways using Windows, starting with a simple .bat file like this:

1. 示例:RunDev.bat:

1. EXAMPLE: RunDev.bat:

start npm start
webpack-dev-server --progress --colors

==========================================================================

=======================================================================

强烈建议:

1. 请暂时忘记观看视频.尝试几个hello world"教程.更重要的是，使用实际代码.尝试更改代码中的内容，看看会发生什么.

1. Please forget about watching videos for a few moments. Try a couple of "hello world" tutorials. More importantly, play with the actual code. Try changing things in the code, and see what happens.

暂时忘记 webpack.

Forget about webpack, at least for the moment.

将 npm 视为构建工具"；不是 作为运行应用程序的一种方式.至少片刻.

Think of npm as a "build tool"; not as a way to run your application. At least for a moment.

关注节点".编写一个节点应用程序".

Focus on "node". Write a "node application".

您的节点应用程序"的一部分将需要ExpressJS"和玉"(现在更名为哈巴狗" - 我仍在使用玉").使用 npm 获取 ExpressJS 和 Jade 依赖项，但要专注于 Node.

Part of your "node application" will require "ExpressJS" and "Jade" (now renamed "pug" - I'm still using "Jade"). Use npm to get your ExpressJS and Jade dependencies, but stay focussed on Node.

推荐教程:

Node 中的简单网站.js，本·古尔利

1. 请务必:

一个.下载代码

B.使用下载的代码完成本教程

b. Work through the tutorial, using the downloaded code

请回帖(新帖子)，并提出您在学习本教程时可能遇到的任何具体问题.

Please post back (a new post) with any specific questions you might have as you work through the tutorial.

这篇关于使用 package.json 一起运行节点服务器和 webpack的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！