引导主题中的 Javascript 不起作用 - Symfony Webpack Encore

Posted 2023-02-16

【中文标题】引导主题中的 Javascript 不起作用 - Symfony Webpack Encore

【英文标题】：Javascript from bootstrap theme not working - Symfony Webpack Encore

【发布时间】：2022-01-13 11:45:33

【问题描述】：

我正在使用购买的 Bootstrap 主题和带有 Webpack Encore 的 Symfony。

主题的给定 JS 似乎不起作用。

在我的app.js文件中，也就是webpack配置的入口，我导入了主题的JS文件，叫做theme.js。 在这个 theme.js 文件中导入了我正在尝试使用的其他 js 文件。

这是我的 theme.js 文件

import passwordVisibilityToggle from './components/password-visibility-toggle';
import inputFormatter from './components/input-formatter';
import formValidation from './components/form-validation';
import stickyNavbar from './components/sticky-navbar';
import smoothScroll from './components/smooth-scroll';
import scrollTopButton from './components/scroll-top-button';
import tooltip from './components/tooltip';
import popover from './components/popover';
import toast from './components/toast';
import rangeSlider from './components/range-slider';
import dropdownSelect from './components/dropdown-select';
import carousel from './components/carousel';
import gallery from './components/gallery';
import lightbox from './components/lightbox';
import datePicker from './components/date-picker';
import subscriptionForm from './components/subscription-form';
import interactiveMap from './components/interactive-map';
import parallax from './components/parallax';
import fileUploader from './components/file-uploader';
import bindedInputValue from './components/binded-input-value';
import masterCheckbox from './components/master-checkbox';
import toggleClass from './components/toggle-class';

组件文件与我的 app.js 位于同一文件夹中。

在 base.html.twig 文件中，我引用了通过 Webpack 创建的 app.js 文件

 encore_entry_script_tags('app') 

当我在 Chrome 中检查控制台时，我看到此错误，例如： app.a14306e2.js:1 Uncaught ReferenceError: noUiSlider is not defined

由此而来：

;noUiSlider.create(a,start:i,connect:l,step:o.dataStep,tooltips:!0,range:min:o.dataMin,max:o.dataMax,...

这是 package.json 文件：

    "dependencies": 
        "bootstrap": "^5.0.2",
        "cleave.js": "^1.6.0",
        "filepond": "^4.28.2",
        "filepond-plugin-file-validate-size": "^2.2.4",
        "filepond-plugin-file-validate-type": "^1.2.6",
        "filepond-plugin-image-crop": "^2.0.6",
        "filepond-plugin-image-preview": "^4.6.7",
        "filepond-plugin-image-resize": "^2.0.10",
        "filepond-plugin-image-transform": "^3.8.6",
        "flatpickr": "^4.6.9",
        "jarallax": "^1.12.7",
        "leaflet": "^1.7.1",
        "lg-fullscreen.js": "^1.2.0",
        "lg-thumbnail.js": "^1.2.0",
        "lg-video.js": "^1.3.0",
        "lg-zoom.js": "^1.3.0",
        "lightgallery.js": "^1.4.0",
        "nouislider": "^15.5.0",
        "parallax-js": "^3.1.0",
        "prismjs": "^1.24.1",
        "simplebar": "^5.3.5",
        "smooth-scroll": "^16.1.3",
        "tiny-slider": "^2.9.3"
    ,
    "devDependencies": 
        "@babel/core": "^7.14.8",
        "@babel/preset-env": "^7.14.8",
        "@symfony/stimulus-bridge": "^2.0.0",
        "@symfony/webpack-encore": "^1.0.0",
        "browser-sync": "^2.27.4",
        "core-js": "^3.0.0",
        "del": "^6.0.0",
        "emitty": "^1.4.0",
        "gulp": "^4.0.2",
        "gulp-autoprefixer": "^6.1.0",
        "gulp-babel": "^8.0.0",
        "gulp-if": "^3.0.0",
        "gulp-pug": "^5.0.0",
        "gulp-rename": "^2.0.0",
        "gulp-rollup": "^2.17.0",
        "gulp-sass": "^5.0.0",
        "gulp-sourcemaps": "^3.0.0",
        "gulp-uglify": "^3.0.2",
        "regenerator-runtime": "^0.13.2",
        "sass": "^1.36.0",
        "sass-loader": "^12.0.0",
        "stimulus": "^2.0.0",
        "webpack-notifier": "^1.6.0"
    ,
    "license": "UNLICENSED",
    "private": true,
    "scripts": 
        "dev-server": "encore dev-server",
        "dev": "encore dev",
        "watch": "encore dev --watch",
        "build": "encore production --progress",
        "build-gulp": "gulp"
    

我已经运行了“npm install”、“npm build”、“npm dev” 我认为 webpack encore 的工作方式有一些我不明白的地方。

我需要一些帮助：/

【问题讨论】：

你配置了 webpack.config.js 吗？ symfony.com/doc/current/frontend/encore/simple-example.html

【参考方案1】：

有时使用标准的 Bootstrap 安装，如果您尝试使用 Twig 模板中脚本中的 bootstrap.js 函数，它尚未加载，并且会引发类似的错误。这可以通过将您的脚本直接放入您的 app.js 文件中来克服，否则您必须首先检查组件是否已加载。下面的示例来自我的带有 webpack Bootstrap 5 的 Symfony 4.4 项目，这演示了从 twig 模板初始化 Modal 所需的内容（我后来仅将函数 run 的内容移动到 app.js）。 这将在继续之前检查 bootstrap 是否已定义（我使用的是 jQuery，但无论如何逻辑都是相同的）：

<script>
  $(document).ready(function () 
      let turns = 0
      const turnKey = function () 
        turns++
        // console.log(turns + ' attempt to start...')
        if (typeof bootstrap !== typeof undefined) 
          console.log('running...')
          return run()
        
        if (turns > 100)
          // give up, something is wrong, not starting
          return false
        
        setTimeout(turnKey, 10)
      
      const run = function () 
        // Bootstrap is loaded
        window.spinner = new bootstrap.Modal($('#loadingSpinner'), 
          'backdrop': 'static',
          'keyboard': false
        )
        console.log('...ran')
      
      turnKey()
  )
</script>

请注意，这在我第一次致电 turnKey() 时总是有效的