How to use "babel" on Serverless Framework?

Serverless Framework
1

I want to use ES6.
And how to use “babel” on Serverless Framework ?
I’m using Serverless Framework Version1.0.0

Thanks!

1 Like
2

I haven’t used it yet myself, but I’ve heard good things about this plugin.

2 Likes
3

We’re using serverless-webpack (currently at 1.0.0-rc.2) working fine with Serverless 1.0.0

Our webpack.config.js includes the babel loader:

...
loaders: [
  {
    test: /\.jsx?$/,
    loader: 'babel',
    exclude: /node_modules/,
    query: {
      presets: ['es2015', 'stage-0'],
      plugins: ['transform-runtime'],
    },
  },
],
...

We have installed babel-cli, babel-core, babel-plugin-transform-runtime, babel-loader, babel-preset-es2015, babel-preset-stage-0 (if you need stage 0).

Then you just need to include the plugin in your serverless.yml

plugins:
  - serverless-webpack

Let me know if you have any trouble.

2 Likes
4

Thanks !
I’ll try it :slight_smile:

5

I tried to add multiple entries with:
entry: {
“handler”: ‘./handler.js’,
“handler2”: ‘./handler2.js’,
}

But I always got this: Path must be a string. Received { handler: ‘./handler.js’, handler2: ‘./handler2.js’ }

Have you had more luck?

6

Have you been able to get this working? Please share your project structure. What I have experienced is that all functions get packaged the same way. I end up with multiple .zip files with the same size in the .serverless folder. When I extract them they all have the exact same content. I have these on my .yml file:

plugins:

  • serverless-webpack

custom:
webpackIncludeModules:
packagePath: ‘./package.json’

package:
individually: true

7

Hello @lima02. In my serverless.yml I only have:

plugins:
    - serverless-webpack

And my webpack.config.js contains:

module.exports = {
// entry: set by the plugin
// output: set by the plugin
target: 'node',
externals: [
/aws-sdk/, // Available on AWS Lambda
],
module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'babel-loader',
      query: {
        presets: [
          [
            'env',
            {
              target: { node: 6.10 }, // Node version on AWS Lambda
              useBuiltIns: true,
              modules: false,
              loose: true,
            },
          ],
          'stage-0',
        ],
      },
    },
  ],
  },
};

If I run sls package, I’m getting several zip-files with different size.

8

Hi @remicastaing,
Thank you so much for helping out. I have tried your config but unfortunately I am still getting the same results. Would you mind sharing your package.json file as well as the Serverless Framework version you are using? I am using 1.15.1

bash-4.2# sls --version 1.15.1

…and this is my package.json

“devDependencies”: {
“babel-core”: “^6.24.1”,
“babel-loader”: “^7.0.0”,
“babel-plugin-transform-runtime”: “^6.23.0”,
“babel-polyfill”: “^6.23.0”,
“babel-preset-es2015”: “^6.24.1”,
“babel-preset-stage-0”: “^6.24.1”,
“serverless-webpack”: “^1.0.0-rc.4”,
“webpack”: “^2.6.1”,
“webpack-node-externals”: “^1.6.0”
},
“dependencies”: {
“aws-sdk”: “^2.63.0”,
“babel-runtime”: “^6.23.0”,
“sharp”: “^0.18.1”
}

Cheers

9

And this is my package.json:

  "dependencies": {
    "aws-sdk": "^2.12.0",
    "crypto": "^0.0.3",
    "graphql": "^0.10.1",
    "graphql-custom-types": "^0.7.3",
    "graphql-server-lambda": "^0.8.0",
    "graphql-tools": "^1.0.0",
    "http": "^0.0.0",
    "isemail": "^2.2.1",
    "jsonwebtoken": "^7.3.0",
    "oauth": "^0.9.15",
    "uuid": "^2.0.3"
  },
  "devDependencies": {
    "babel-loader": "^7.0.0",
    "babel-preset-env": "^1.5.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "serverless-dynamodb-local": "^0.2.22",
    "serverless-offline": "^3.13.2",
    "serverless-plugin-webpack": "^1.1.0",
    "webpack": "^2.6.1"
  }

(I’m playing with serverless-offline, local dynamodb, graphql…)

1 Like
10

Thank you! I noticed your plugin reference on Serverless.yml is serverless-webpack and not serverless-plugin-webpack. Can you please confirm because it is a different plugin and does not match your package.json. Cheers

1 Like