Javascript - 未找到导入答案

【问题标题】：Javascript - Import not foundJavascript - 未找到导入
【发布时间】：2018-10-14 14:56:30
【问题描述】：

我正在尝试使文本掩码 GitHub 存储库与我的 laravel 项目一起使用，有了这个，我想使用某个插件，它允许我将输入字段屏蔽为价格。我说的 GitHub 仓库是linked here

插件被称为createNumberMask，在他们的 github 页面上，它在他们的文档中说明了以下内容：

import createNumberMask from 'text-mask-addons/dist/createNumberMask'

// First, you need to create the `numberMask` with your desired configurations
const numberMask = createNumberMask({
   prefix: '',
   suffix: ' $' // This will put the dollar sign at the end, with a space.
})

// ...then pass `numberMask` to the Text Mask component as the mask

现在，当我尝试将其实现到我自己的项目中时，它给了我一个错误，说找不到导入。这是什么原因造成的？

我有一个刀片文件，它的底部有脚本标签。刀片文件是这样的，

@section('content')
<div class="row " style="color: white; width: 100%; margin: 0;" id="showEffect">
    <div class="col-md-12 text-center" style="margin-top: 10rem">
        <div class="row justify-content-md-center">
            <div class="col-md-2">
                <input type="text" class="myInput form-control depth-5">
            </div>
        </div>

    </div>
</div>


<script type="module">

    import createNumberMask from '/node_modules/text-mask-addons/dist/createNumberMask'

    const numberMask = createNumberMask({
        prefix: '€',
        suffix: '',
        allowDecimal: true,
    });

    var myInput = document.querySelector('myInput');

    var maskedInputController = vanillaTextMask.maskInput({
        inputElement: document.querySelector('myInput'),
        mask: numberMask
    });


</script>

@endsection

为什么导入不起作用？ js 文件位于 node_modules 文件夹中。

APP.JS

require('./bootstrap');

import TextMask from 'vanilla-text-mask/dist/vanillaTextMask';
import createNumberMask from 'text-mask-addons/dist/createNumberMask';

window.Vue = require('vue');

window.events = new Vue();

window.flash = function (message) {
    window.events.$emit('flash', message);
};


Vue.component('flash', require('./components/Flash.vue'));

// Vue.component('product-view', require('./components/Products.vue'));
// Vue.component('wysiwyg', require('./components/Wysiwyg.vue'));

const app = new Vue({
el: '#app',
});

const numberMask = createNumberMask({
prefix: '€',
suffix: '',
allowDecimal: true,
});

var myInput = document.querySelector('myInput');

var maskedInputController = vanillaTextMask.maskInput({
    inputElement: document.querySelector('myInput'),
    mask: numberMask
});

【问题讨论】：

标签： javascript laravel laravel-5 node-modules

【解决方案1】：

代码包含在刀片模板中，而不是通过 resources/assets/js/app.js 或任何类型的 javascript 编译器（在本例中为“webpack”）

问题是，虽然大多数浏览器都能理解 ~ES6，但导入/要求仍然存在限制。

由于node_modules在服务器端，前端不能随便访问。

因此，您可以/需要做的是以一种或另一种方式将其添加到提到的 javascript 文件中，并使用 npm run dev 或类似名称进行编译。

【讨论】：

那么我可以用我的代码做些什么来完成这项工作？我必须在我的 app.js 中添加一些代码吗？这是如何工作的？
将<script>标签的内容移动到例如resources/assets/js/app.js的底部，然后运行npm run dev，假设你之前在项目中运行过一次npm install。
现在它说 vanillaTextMask 没有定义。我不太明白。它正在编译，没有错误。我怎样才能使这项工作？我更新了我的代码
我的错，你首先需要告诉 npm 安装模块，这可以通过npm install text-mask-addons --save 来完成，那么理论上应该可以，在命令完成后运行npm run dev /跨度>
它仍然说 vanillaTextMask 没有定义。我通过 NPM 安装了 vanilla-text-mask，但它仍然说它没有定义。这是什么原因造成的？

【解决方案2】：

确保您使用的是 ES6 Transpiler，即 Babel

【讨论】：