类未使用laravel mix（webpack）定义

Question

我尝试在HTML文件中调用Javascript类，但出现错误：Uncaught ReferenceError: A11yCarousel is not defined。

我的laravel组合非常简单：

    mix.js('src/a11y-carousel.js', 'dist/a11y-carousel.min.js').stylus('src/demo.styl', 'dist/');

如果我调用源文件：../src/a11y-carousel.js（下面的注释行），一切正常。

    <script src="a11y-carousel.min.js"></script>
    <!--<script src="../src/a11y-carousel.js"></script>-->
    <script>
      document.addEventListener("DOMContentLoaded", function(event) {
        var slider = new A11yCarousel("#slider", {
          autoplay: true
        });
      });
    </script>

我的..babelrc

{
    "plugins": ["transform-class-properties"]
}

我在做什么错？

Answer 1

首先（根据您的信息）。当您可以访问../src/a11y-carousel.js时，我确定您已在http://localhost/your-project/public或http://localhost/public（XAMPP方式）上安装了Laravel。

您的混音：

mix.js('src/a11y-carousel.js', 'dist/a11y-carousel.min.js')
   .stylus('src/demo.styl', 'dist/');
将JS和CSS编译到dist文件夹中（期望）：

/your-project
    /app
    /bootstrap
    /config
    /database
    /dist            #<----- Your JS destination (expectation)
    /public          #<----- You acess from here..
    /resources
    /routes
    /src             #<----- But you use JS file from here
    /storage
这意味着，您的public使用src中的文件夹，而不是编译文件中的文件夹。

---

Laravel为您的资产提供了正确的文件夹，位于resource文件夹中。

您可以这样放置资产：

/your-project
    /app
    /bootstrap
    /config
    /database
    /public         
    /resources
        /js
        /styl
        /fonts
        /and-other..
    /routes
    /storage
更新您的混音：

mix.js('resources/js/a11y-carousel.js', 'public/js')
   .stylus('resources/styl/demo.styl', 'public/css');
它将编译到public文件夹中：

/your-project
    /app
    /bootstrap
    /config
    /database
    /public   
        /js
        /css      
    /resources
    /routes
    /storage
您可以通过asset()或mix()进行访问：

<!-- public/js/a11y-carousel.js -->
<script src="{{ asset('js/a11y-carousel.js') }}"></script>
如果需要缩小文件大小，只需键入npm run production。

---

FYI

如果您曾经安装过PHP应用程序甚至是Wordpress，您可能都知道您需要将文件复制并粘贴到网站的根文件夹中，这样就可以了。

嗯，Laravel的设置有些不同。 Laravel通过将应用程序的所有功能放在根文件夹之外，使事情变得更加安全。实际上，您的应用程序的根目录应该是public文件夹。