CODEWITHSUNDEEP
javascriptnode.jsgulpecmascript-6webpack
TomSelleck
TomSelleck

Reputation: 6968

Trouble using babel transpiler with WebPack

I'm trying to use this package in my application.

It appears to be written in ES6 so I need a transpiler like babel. I've started a new project and tried the following:

After trying to run this from the dist folder with python -m SimpleHTTPServer, I got an error: index.js:3 Uncaught ReferenceError: require is not defined.

After some digging, this is because require can't be used client-side. So next I looked into using WebPack to allow me to use require.

I went into my dist folder (where my transpiled javascript is) and ran:

webpack ./index.js index.js

But now I'm getting the error index.js:78 Uncaught SyntaxError: Unexpected token import.

Can anybody see what I'm missing (apart from a NPM-ES6-Gulp-WebPack tutorial)? I seem to be stuck in a loop of WebPack-ing and transpiling.

index.html

<!DOCTYPE html>
<html>
<body>

<h4>Welcome</h4>

<button onclick="startAudio()">Start Audio</button>

<script src="js/index.js"></script>
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>

</body>
</html>

index.js (pre-babel / WebPack - ification)

import {HasAudioContext} from 'audio-effects';

function startAudio() {
    console.log("Start Audio...");

    let audioContext = null;
    if (HasAudioContext) {
        console.log("Has Audio CTX");
        audioContext = new AudioContext();
    }
    else {
        console.log("No Audio CTX");
    }
}

gulpfile.js

var gulp = require("gulp");
var babel = require("gulp-babel");

gulp.task("default", function () {
  return gulp.src("src/app.js")
    .pipe(babel())
    .pipe(gulp.dest("dist"));
});

Upvotes: 1

Views: 563

Answers (2)

Sambego
Sambego

Reputation: 46

I've made some changes to the library (I'm the original author of the package). When installing the package with npm, you will now get the transpiled ES5 code instead of the ES6 source. You'll still need webpack, browserify, ... to load the module though.

This might fix the the Uncaught SyntaxError: Unexpected token import error, so please update your audio-effects library to the latest version.

The wrong imports as mentioned in the answer by Jorawar Singh should be resolved as well.

I'm still working on the library so if you run into any problems, feel free to create an issue or pull request on github.

I personally use the package with webpack. this is my webpack.config.babel.js file (remove comments). Note: I'm using react, if you don't set the react parameter to false.

import config from 'madewithlove-webpack-config';

export default config({
    react: true,
    sourcePath: 'src', // Source directory
    outputPath: 'builds', // Transpiled coded directory
});

This imports a basic webpack config from https://github.com/madewithlove/webpack-config/

Since I'm writing code in ES6, I'm transpiling it with babel, my .babelrc file looks like this:

{
    "presets": ["es2015", "stage-0"],
}

With all this setup, you can just run webpack with webpack-dev-server --inline --hot.

You don't have to use the madewitlove webpack config but it takes care of some standard setup like compiling scss etc.

I hope this gives you an insight in how to use the audio-effects package or any other ES6 package.

Upvotes: 1

Jorawar Singh
Jorawar Singh

Reputation: 7621

Well what i understand there was some issues with this library it was written es6 and when you do import and want to complie into es5 with webpack then webpack will also bummbel all the require modules for you. Here's my webpack.config look likes 

var webpack = require('webpack');
var config = {  
  entry: './index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js'
  },
  module: {
    loaders: [   {
       test: /\.js$/,
      loader: 'babel-loader',
        query: {
          presets: ['es2015']
        }
  }]
  }
};

module.exports = config;

running by webpack will compile the library and your index.js file to bundle.js

there was some other issues i think in order to get this library you need to do some small changes in library. from 

'./Helpers/HasAudioContext'; //this doesn't exist and 
                                                //webpack will give you compile error

to 

'./helpers/hasAudioContext';

I had one issue whitch i couldn't resolve is i couldn't run the startAudio function but through the index.js i could (weard let me know if you find why) in your index.js

document.getElementById("btn").addEventListener("click", startAudio);

there are still some issues witch i want to resolve and also there are some issues with the library witch need to be resolved

Upvotes: 0

Related Questions