草庐IT

node.js - Webpack 用于后端？

coder 2023-05-28 原文

我只是想知道，我开始在一个新项目中使用 Webpack，到目前为止它运行良好。我几乎会说我比以前用过的 Grunt 更喜欢它。但现在我很困惑如何和/或应该将它与我的 Express 后端一起使用？

看，我正在创建一个具有前端 (ReactJS) 和后端 (ExpressJS) 的应用程序。该应用程序将在 Heroku 上发布。现在看来我也应该将 Webpack 与 ExpressJS 一起使用，以便通过一个命令(前端和后端)启动和运行应用程序。

但是写这篇博文的人 http://jlongster.com/Backend-Apps-with-Webpack--Part-I似乎使用 Webpack 将所有后端 js 文件捆绑在一起，我认为这真的没有必要。为什么要捆绑我的后端文件？我想我只想运行后端，观察我的后端文件是否有变化，并将 Webpack 的其余功能仅用于前端。

你们如何捆绑前端但同时运行后端 nodejs 部分？或者有什么好的理由将后端文件与 Webpack 捆绑在一起？

最佳答案

为什么在 Node 后端使用 webpack

如果我们谈论的是 react 和 node 应用程序，您可以构建 isomorphic react app .如果您在客户端的 react 应用程序中使用 import ES6 模块，那没关系 - 它们由客户端的 webpack 捆绑。

但是，当您使用自 node doesn't support ES6 Modules 以来相同的 react 模块时，问题出在服务器上.您可以在 Node 服务器端使用 require('babel/register'); 但它在运行时转换代码 - 它无效。解决此问题的最常见方法是通过 webpack 打包后端(您不需要所有代码都由 webpack 转译 - 只是有问题，例如本例中的 react 内容)。

JSX也是如此。

同时捆绑前端和后端

您的 webpack 配置必须以数组形式进行配置:一个用于前端，第二个用于后端:

webpack.config.js

const common = {
    module: {
        loaders: [ /* common loaders */ ]
    },
    plugins: [ /* common plugins */ ],
    resolve: {
        extensions: ['', '.js', '.jsx'] // common extensions
    }
    // other plugins, postcss config etc. common for frontend and backend
};

const frontend = {
     entry: [
         'frontend.js'
     ],
     output: {
        filename: 'frontend-output.js'
     }
     // other loaders, plugins etc. specific for frontend
};

const backend = {
     entry: [
         'backend.js'
     ],
     output: {
        filename: 'backend-output.js'
     },
     target: 'node',
     externals: // specify for example node_modules to be not bundled
     // other loaders, plugins etc. specific for backend
};

module.exports = [
    Object.assign({} , common, frontend),
    Object.assign({} , common, backend)
];

如果您使用 webpack --watch 启动此配置，它将并行构建您的两个文件。当您编辑前端特定代码时，只会生成 frontend-output.js，backend-output.js 也是如此。最好的部分是当您编辑同构 react 部分时 - webpack 将同时构建两个文件。

您可以在 tutorial 中找到解释何时使用 webpack for node(在第 4 章)。

关于node.js - Webpack 用于后端？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37788142/

Webpacknodecodestrongnode.jsheroku

有关node.js - Webpack 用于后端？的更多相关文章

  1. ruby-on-rails - Rails 常用字符串(用于通知和错误信息等) - 2

    大约一年前，我决定确保每个包含非唯一文本的Flash通知都将从模块中的方法中获取文本。我这样做的最初原因是为了避免一遍又一遍地输入相同的字符串。如果我想更改措辞，我可以在一个地方轻松完成，而且一遍又一遍地重复同一件事而出现拼写错误的可能性也会降低。我最终得到的是这样的:moduleMessagesdefformat_error_messages(errors)errors.map{|attribute,message|"Error:#{attribute.to_s.titleize}#{message}."}enddeferror_message_could_not_find(obje

  2. Ruby Sinatra 配置用于生产和开发 - 2

    我已经在Sinatra上创建了应用程序，它代表了一个简单的API。我想在生产和开发上进行部署。我想在部署时选择，是开发还是生产，一些方法的逻辑应该改变，这取决于部署类型。是否有任何想法，如何完成以及解决此问题的一些示例。例子:我有代码get'/api/test'doreturn"Itisdev"end但是在部署到生产环境之后我想在运行/api/test之后看到ItisPROD如何实现？ 最佳答案 根据SinatraDocumentation:EnvironmentscanbesetthroughtheRACK_ENVenvironm

  3. ruby - inverse_of 是否适用于 has_many？ - 2

    当我使用has_one时，它​​工作得很好，但在has_many上却不行。在这里您可以看到object_id不同，因为它运行了另一个SQL来再次获取它。ruby-1.9.2-p290:001>e=Employee.create(name:'rafael',active:false)ruby-1.9.2-p290:002>b=Badge.create(number:1,employee:e)ruby-1.9.2-p290:003>a=Address.create(street:"123MarketSt",city:"SanDiego",employee:e)ruby-1.9.2-p290

  4. ruby - "undefined method"用于 rails 模型 - 2

    我正在使用带有Rails的Devise，我想添加一个方法“getAllComments”，所以我这样写:classUser在我的Controller中:defdashboard@user=current_user@comments=@user.getAllComments();end当我访问我的url时，我得到了undefinedmethod`getAllComments'for#我做错了什么？谢谢 最佳答案 因为getAllComments是一个类方法，而您正试图将其作为实例方法访问。您要么需要访问它:User.getAllCom

  5. Ruby on Rails regexp equals-tilde 与 array include 用于检查选项列表 - 2

    我正在使用Rails3.2.3和Ruby1.9.3p0。我发现我经常需要确定某个字符串是否出现在选项列表中。看来我可以使用Ruby数组.includemethod:或正则表达式equals-tildematchshorthand用竖线分隔选项:就性能而言，一个比另一个好吗？还有更好的方法吗？ 最佳答案 总结:Array#include?包含String元素，在接受和拒绝输入时均胜出，对于您的示例只有三个可接受的值。对于要检查的更大的集合，看起来Set#include?和String元素可能会获胜。如何测试我们应该根据经验对此进行测试

  6. ruby-on-rails - Ruby "Undefined Method"用于类方法 - 2

    Ruby初学者努力简单地将这个@@people散列的值打印到控制台classPerson#haveafirst_nameandlast_nameattributewithpublicaccessorsattr_accessor:first_nameattr_accessor:last_name#haveaclassattributecalled`people`thatholdsanarrayofobjects@@people=[]#havean`initialize`methodtoinitializeeachinstancedefinitialize(first_name,last_

  7. python - 用于 Python 或 Ruby 的 Amazon Book API？ - 2

    这个问题在这里已经有了答案:关闭10年前。PossibleDuplicate:AmazonAPIlibraryforPython?我正在寻找一个AmazonAPI，它可以让我:按书名或作者查找书籍显示书籍封面获取有关每本书的信息(价格、评级、评论数、格式、页数等)Python或Ruby库都可以(我只想要最容易使用的库)。有什么建议么？我知道在SO上还有其他一些关于此的帖子，但这些API似乎很快就过时了。[几个月前我尝试了几个建议的Ruby库，但无法让它们中的任何一个工作。]

  8. ruby-on-rails - 用于门户的 Ruby 技术 - 2

    我刚刚看到whitehouse.gov正在使用drupal作为CMS和门户技术。drupal的优点之一似乎是很容易添加插件，而且编程最少，即重新发明轮子最少。这实际上正是Ruby-on-Rails的DRY理念。所以:drupal的缺点是什么？Rails或其他基于Ruby的技术有哪些不符合whitehouse.org(或其他CMS门户)门户技术的资格？ 最佳答案 Whatarethedrawbacksofdrupal?对于Ruby和Rails，这确实是一个相当主观的问题。Drupal是一个可靠的内容管理选项，非常适合面向社区的站点。它

  9. ruby-on-rails - Assets 管道损坏 : Not compiling on the fly css and js files - 2

    我开始了一个新的Rails3.2.5项目，Assets管道不再工作了。CSS和Javascript文件不再编译。这是尝试生成Assets时日志的输出:StartedGET"/assets/application.css?body=1"for127.0.0.1at2012-06-1623:59:11-0700Servedasset/application.css-200OK(0ms)[2012-06-1623:59:11]ERRORNoMethodError:undefinedmethod`each'fornil:NilClass/Users/greg/.rbenv/versions/1

  10. ruby-on-rails - Rails - 理解 application.js 和 application.css - 2

    rails新手。只是想了解\assests目录中的这两个文件。例如，application.js文件有如下行://=requirejquery//=requirejquery_ujs//=require_tree.我理解require_tree。只是将所有JS文件添加到当前目录中。根据上下文，我可以看出requirejquery添加了jQuery库。但是它从哪里得到这些jQuery库呢？我没有在我的Assets文件夹中看到任何jquery.js文件——或者直接在我的整个应用程序中没有看到任何jquery.js文件？同样，我正在按照一些说明安装TwitterBootstrap(http:

随机推荐