使用package.json一起运行节点服务器和webpack

Question

我通过学习此视频完成了todo app:

Super MEAN Stack教程:Angular,Node/Express,Webpack,MongoDB,SASS,Babel/ES6,Bootstrap

在该视频在时间19:18在这个 URL,就教导我应该用低于单独的混帐bash的情况下两个命令的,如果我想在运行窗口使用NPM运行开发:

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

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

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

那么,有什么方法可以在Windows中做同样的事情吗？

此外,在该教程中,我可以看到端口号.3000被分配给节点服务器,但由于使用了dev依赖项,他在浏览器中运行localhost:8080.你可以看到在这里.教程结束后,我跟着创建了该应用程序.现在我想部署它.所以,我首先想学习在非开发依赖模式下运行测试我的网站.即当我在浏览器中键入localhost:3000时,我的应用程序应该成功运行.那么,任何人都能解释一下这个步骤吗？

更新:

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

Answer 1

让我们打破这个:

1. 如果您已定义此脚本:

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

2. ...然后这个npm命令: npm run dev

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

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

   b)webpack-dev-server --progress --colors#在前台同时运行webpack

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

4. 示例:RunDev.bat:

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

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

强烈建议:

1. 请忘记观看视频片刻.尝试一些"hello world"教程.更重要的是,玩实际的代码.尝试更改代码中的内容,看看会发生什么.

2. 忘记webpack,至少目前是这样.

3. 把npm想象成"构建工具"; 不是一种运行应用程序的方法.至少有一会儿.

4. 专注于"节点".写一个"节点应用程序".

5. 你的"节点应用程序"的一部分将需要"ExpressJS"和"Jade"(现在改名为"pug" - 我仍在使用"Jade").使用npm来获取ExpressJS和Jade依赖项,但要专注于Node.

建议补习:

Node.js中的一个简单网站,Ben Gourley

6. 务必:

   一个.下载代码

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

在您完成本教程时,请回复(新帖子)以及您可能遇到的任何具体问题.