0

I'm very sorry for asking such a beginner question, but I just learned the basics of JS without and do not completely understand the new ES6-features.

I just want to use rangy within my project and initialize the rangy object within <script></script>-Tags in my html-file (Blade-template) with the following method

rangy.init();

The rangy-library consists of six files, all of whom I included into my footer.

Chrome console tells me that rangy is undefined. What do I need to do? I tried thousands of syntactical variants of import but the console tells me unexpected token import

I tried compiling the files down to one file with Laravel mix (mix.babel, mix.js, mix.scripts), nothing worked. I'm pretty sure I just need to grasp the concept of how to work with ES6-Modules but not tutorial really helped. Maybe one of you can help me to figure out how to use rangy in this particular case?

Thanks in advance!

Bene
  • 38
  • 2
  • 14
  • Typically, you want to bundle your JS (with the libraries and any of your own code), then include or reference that file in the server-side output. Unfortunately, as written, I think this question might be too broad to answer well. – ssube Aug 10 '17 at 14:59
  • simply import, read here although unrelated, you can see how the guy imported rangy https://stackoverflow.com/questions/34104643/typeerror-g-rangy-saveselection-is-not-a-function-using-textangular-rangy-b – Stavm Aug 10 '17 at 15:01

2 Answers2

0

You should use the import syntax to import modules with JavaScript as this is the supported syntax which will eventually work in browsers. However, because browsers are not yet supporting this feature it means you need to enable webpack to use babel-loader.

Once that configuration is setup and working you can simply import your module like this...

import rangy from 'rangy'

Of course you also need rangy to be available either locally in your node_modules folder or installed globally so webpack and babel will know where to find it.

Chris Hawkes
  • 11,923
  • 6
  • 58
  • 68
0

Thanks for your answers. I tried a few things and didn't really succeed... So I did the following: In my webpack.mix.js (Laravel Mix) I have the files that I need:

mix.babel([
    'node_modules/rangy/lib/rangy-core.js',
    'node_modules/rangy/lib/rangy-classapplier.js',
], 'public/js/rangy.js');

I embed the compiled rangy.js in my footer element

<script type="text/javascript" src="{{ URL::asset('js/rangy.js')}}"></script>

Below I import and initialize rangy

<script>

    import rangy from 'rangy';

    rangy.init();

</script>

And chrome console gives me Uncaught SyntaxError: Unexpected token import.

Was that the wrong approach?

Bene
  • 38
  • 2
  • 14