Question

我有一台设置如下的Express服务器：

// src/server/server.js
var express = require('express');
var app = express();

app.use('/libs', express.static('./node_modules/'));
app.use('/app', express.static('./src/client/app'));
app.use(express.static('./src/client'));

app.get('/', function (req, res) {
  res.sendFile('./src/client/app/index.html', { root: __dirname });
});

var port = process.env.PORT || 8001;
var environment = process.env.NODE_ENV;

app.listen(port, function() {
    console.log('Express server listening on port ' + port);
});

静态目录暴露对我来说似乎很尴尬（而且不正确）。

我的项目结构如下：

/project
  /node_nodules
  /src
    /client
      /app
        app.js
        my.controller.js
      index.html
    /server
      server.js
  package.json

总而言之，这允许我的index.html提供文件：

<!-- src/client/index.html -->
<body>
    <script src="libs/jquery/dist/jquery.js"></script>
    <script src="libs/angular/angular.js"></script>
    <script src="app/app.js"></script>
    <script src="app/form.controller.js"></script>

    <div ng-controller="FormController as formController">
        {{formController.message}}
    </div>
</body>

我是否使用构建过程将依赖关系从node_modules中删除，我的Express设置对我来说并不合适。

使用Express公开静态目录是否比我上面使用的更好？

Answer 1

您可以使用gulp或任何任务运行程序捆绑您的源代码，并将它们放入一个文件夹，并仅将该文件夹公开到前端，

例如，您可以将angular和jquery个库捆绑到一个名为vendor.bundle.js的文件中，并将app.js和form.controller.js捆绑到app.bundle.js中，然后将这两个文件放在dist/下的project文件夹中，文件夹结构类似于：

/project
  /node_nodules
  /dist
    vendor.bundle.js
    app.bundle.js
  /src
    /client
      /app
        app.js
        my.controller.js
      index.html
  /server
    server.js
  package.json

然后在您的快速配置中，您只能公开dist文件夹：

app.use(express.static('./dist'));

的index.html

<body>
    <script src="dist/vendor.bundle.js"></script>
    <script src="dist/app.bundle.js"></script>

    <div ng-controller="FormController as formController">
        {{formController.message}}
    </div>
</body>

在Express中使用静态目录提供Angular 1.x应用程序

1 个答案: