如何在 Laravel 中使用这个 JS 库？进口？要求？答案

【问题标题】：How to use this JS library in Laravel? Import? Require?如何在 Laravel 中使用这个 JS 库？进口？要求？
【发布时间】：2018-01-18 21:48:33
【问题描述】：

很抱歉问了这样一个初学者的问题，但我刚刚学习了 JS 的基础知识，还没有完全理解新的 ES6 特性。

我只想在我的项目中使用 rangy 并使用以下方法在我的 html 文件（刀片模板）中初始化 <script></script>-Tags 中的 rangy 对象

rangy.init();

rangy-library 包含六个文件，所有这些文件都包含在我的页脚中。

Chrome 控制台告诉我 rangy 未定义。我需要做什么？我尝试了数千种 import 的语法变体，但控制台告诉我 unexpected token import

我尝试使用 Laravel mix（mix.babel、mix.js、mix.scripts）将文件编译成一个文件，但没有任何效果。我很确定我只需要掌握如何使用 ES6-Modules 的概念，但教程并没有真正的帮助。也许你们中的一个人可以帮助我弄清楚在这种特殊情况下如何使用 rangy？

提前致谢！

【问题讨论】：

【解决方案1】：

您应该使用 import 语法来导入带有 JavaScript 的模块，因为这是支持的语法，最终将在浏览器中工作。然而，由于浏览器还不支持这个特性，这意味着你需要启用 webpack 才能使用 babel-loader。

一旦配置完成并开始工作，您就可以像这样简单地导入您的模块...

import rangy from 'rangy'

当然，您还需要 rangy 可以在本地的 node_modules 文件夹中使用或全局安装，以便 webpack 和 babel 知道在哪里可以找到它。

【讨论】：

【解决方案2】：

感谢您的回答。我尝试了几件事并没有真正成功...... 所以我做了以下事情：在我的 webpack.mix.js (Laravel Mix) 我有我需要的文件：

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

我将编译后的 rangy.js 嵌入到我的页脚元素中

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

下面我导入并初始化rangy

<script>

    import rangy from 'rangy';

    rangy.init();

</script>

Chrome 控制台给了我Uncaught SyntaxError: Unexpected token import。

那是错误的方法吗？

【讨论】：