如何在Laravel中使用此JS库？ 进口？ 要求？

Question

我很抱歉提出这样一个初学者的问题，但是我只是在没有和也不完全了解新的ES6功能的情况下学习了JS的基础知识。

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

rangy.init();

rangy库由六个文件组成，我将所有这些文件都包含在页脚中。

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

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

提前致谢！

Answer 1

您应该使用import语法导入带有JavaScript的模块，因为这是最终将在浏览器中支持的受支持语法。 但是，由于浏览器尚不支持此功能，这意味着您需要启用Webpack才能使用babel-loader。

一旦配置成功并开始工作，您就可以像这样导入模块...

import rangy from 'rangy'

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

Answer 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 。

那是错误的方法吗？