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

Posted 2023-02-22

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

【英文标题】：Vue - Compile other folder outside of /src in Vue.js project

【发布时间】：2019-03-09 02:23:31

【问题描述】：

我有一个使用 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

【问题讨论】：

什么是“Node.js 文件夹”？ 究竟你希望这个结果是什么？

你能展示一下项目结构吗？

哇这个问题好混乱……首先你应该确认你想要构建一个服务器端脚本，因为通常Vue只用于客户端（但使用Nuxt你也可以构建一个服务器端侧服务）。然后解释为什么你绝对需要 webpack：通常不捆绑服务器端脚本。有了 5k 代表，我们希望您的问题提供更多详细信息。

@ghybs 我已经更改了问题的措辞。我为糟糕的语法道歉。我知道服务器端没有与 Vue.js 项目捆绑在一起，这就是为什么 /src 和 /server 是分开的。

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

【参考方案1】：

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

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

它成功了。

【参考方案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