3

I am currently migrating an old Firefox extension and want to use the es2017 features.

The dependencies:

"devDependencies": {
  "babel-core": "^6.26.0",
  "babel-loader": "^7.1.4",
  "babel-preset-env": "^1.6.1",
  "babel-preset-es2017": "^6.24.1",
  "eslint": "^4.19.0",
  "gulp": "^4.0.0",
  "web-ext": "^2.5.0",
  "web-ext-types": "^2.0.1",
  "webpack": "^4.1.1",
  "webpack-stream": "^4.0.2"
}

My first test file:

export class Test {

    async hello(param) {
        console.debug('Test', browser);
        return `Hello ${param}, how are you?`;
    }
}

My second test file:

import { Test } from './Test';

browser.runtime.onStartup.addListener((a, b, c, d) => {
    console.debug('Arguments:', a, b, c, d);
    const test = new Test();
    test.hello('World').then((result) => {
        console.debug('Result:', result);
    });
});

My gulpfile.babel.js:

import gulp from 'gulp';
import webpack from 'webpack';
import webpackStream from 'webpack-stream';

const backgroundJS = (done) => {
    gulp.src(paths.src.js.background)
        .pipe(webpackStream(require('./webpack.config.js')), webpack)
        .pipe(rename('background.js'))
        .pipe(gulp.dest(paths.dist.firefox + '/js'));
    done();
};

My webpack.config.js:

module.exports = {
    output: {
        filename: 'bundle.js',
    },
    module: {
        rules: [{
            test: /\.(js|jsx)$/,
            loader: 'babel-loader',
            query: {
                presets: ['es2017']
            }
        }]
    }
};

The result in the background.js does not contain any es2017 code...

() = > {} is converted into function form
classes are replaced by something very ugly
and also the new `` String is not there any more...

What am I doing wrong?

Nabor
  • 1,661
  • 3
  • 20
  • 45
  • 1
    why do you need gulp when you are using webpack? – Tomasz Mularczyk Mar 20 '18 at 16:28
  • Webpack seems to be unable to do all the other tasks I want to do, like JSON transformation or other... – Nabor Mar 20 '18 at 16:35
  • What I basically want is to just combine all files that are imported into one running file that can than be used as a content script, that seems to be unable to deal with import – Nabor Mar 20 '18 at 16:41
  • Check if you have a `.babelrc` and configured other presets/plugins there. – Sin Mar 20 '18 at 23:10
  • As you can see, there are no other presets needed. The question contains my webpack.config.js. Also the .babelrc is there but not needed, because again webpack.config.js defines the preset... – Nabor Mar 21 '18 at 07:49

0 Answers0