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 并且 compile/run 就像这样：

./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

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

Vue - Compile other folder outside of /src in Vue.js project

webpack

vue.js

vue-cli-3