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

Question

我有一个使用WebSockets的常规Vue.js项目（使用v3.0.3创建）。此外，在项目根目录中还有/server文件夹，该文件夹具有存放多人游戏方面和套接字代码的Node.js代码。

但是，由于文件夹/server与Vue.js项目的/src文件夹无关，因此我如何利用Vue CLI Webpack配置并向其中添加babel编译（使用Webpack）适当地编译/src

https://cli.vuejs.org/guide/webpack.html#simple-configuration

Answer 1

我能够导入 babel-cli ，并且只需编译/运行即可：

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

它奏效了。

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