CODEWITHSUNDEEP
vue.jswebpackvue-cli-3
test
test

Reputation: 18200

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

I have a regular Vue.js project (created using v3.0.3) that uses WebSockets. Also in the project root is the /server folder which has the Node.js code that houses the multi-player aspect and socket code.

However, since the folder /server is independent of the /src folder from the Vue.js project, how do I make use of the Vue CLI webpack config and add babel compiling (using Webpack) to appropriately compile both the /src

enter image description here

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

Upvotes: 5

Views: 2306

Answers (2)

AmerllicA
AmerllicA

Reputation: 32502

Actually, you should add .babelrc file and declare presets, env options and etc into it.

I don't know why you don't eject, because of access to webpack configuration. In the webpack config, you can declare your src folder or exclude other folders like node_modlules or your custom server folder.

For example, see webpack config for your issue:

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

And see a sample .babelrc file:

{
  "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
      }
    }
  }

Then you should use your webpack commands to build: 

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

Upvotes: 0

test
test

Reputation: 18200

I was able to import babel-cli and just compile/run like so: 

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

and it worked.

Upvotes: 5

Related Questions