Vue - 在Vue.js项目中编译/src外的其他文件夹

Question

我有一个普通的Vue.js项目（使用v3.0.3创建），其中使用了WebSockets。项目根目录中还有一个名为/server的文件夹，该文件夹包含用于多人游戏和套接字代码的Node.js代码。

然而，由于/server文件夹独立于Vue.js项目的/src文件夹，我该如何利用Vue CLI webpack配置并添加babel编译（使用Webpack）以适当地编译/src？

参考链接：https://cli.vuejs.org/guide/webpack.html#simple-configuration 图片链接：

- test

---

什么是“Node.js文件夹”？你希望这个的确切结果是什么？ - Phil

你能展示一下你的项目结构吗？ - Sagar Bahadur Tamang

哇，这个问题真是让人困惑啊...首先你要确认你是否想要构建一个服务器端脚本，因为通常情况下Vue只用于客户端（但是使用Nuxt你也可以构建一个服务器端服务）。然后解释一下为什么你绝对需要webpack：通常情况下服务器端脚本是不需要打包的。根据你的声望值（5k rep），我们希望能从你的问题中得到更多详细信息。 - ghybs

@ghybs，我已经修改了问题的措辞。对于糟糕的语法，我深表歉意。我知道服务器端不会与Vue.js项目捆绑在一起，这就是为什么/src和/server是分开的原因。 - test

嗨，现在确实清楚了一些。所以你想使用与Vue项目相同的webpack配置来转译你的服务器代码？首先，为什么需要转译？服务器代码在您选择的机器上运行，支持所需的ES语法的已知Node.js版本。与客户端代码完全不同，客户端代码在远程机器和任意浏览器和版本上运行，并且未知ES支持，因此需要对客户端代码进行转译。 - ghybs

我希望在我的Node.js脚本中能够使用import而不是require，同时还需要webpack/babel支持的其他功能。 - test

Answer 1

我能够导入 babel-cli 并像这样进行 编译/运行：

./node_modules/.bin/nodemon --exec babel-node --presets env,stage-2 server.js

它有效了。

- test

Answer 2

实际上，您应该添加 .babelrc 文件并在其中声明 presets、env 选项等。

我不知道为什么您不弹出，因为可以访问 webpack 配置。在 webpack 配置中，您可以声明您的 src 文件夹或排除其他文件夹，如 node_modlules 或您的自定义 server 文件夹。

例如，查看您的问题的 webpack 配置：

module.exports = {
  ~~~
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: ['node_modules', 'server'],
        use: [
          {
            loader: 'babel-loader',
          },
        ],
      },
            ~~~

看一个示例.babelrc文件：

{
  "presets": [
    "es2015",
    "es2016",
    "es2017",
    "env",
    "stage-0"
  ],
  "plugins": [
    "transform-class-properties",
    "transform-object-rest-spread",
      [
        "transform-runtime",
        {
          "helpers": true,
          "polyfill": true,
          "regenerator": true
        }
      ]
    ],
    "env": {
      "development": {
        "compact": false
      }
    }
  }

然后，您应该使用webpack命令进行构建：

webpack -p --config ./webpack.production.config.js

- AmerllicA