带有 webpack 的子文件夹中的模块答案

【问题标题】：modules in subfolders with webpack带有 webpack 的子文件夹中的模块
【发布时间】：2018-06-30 21:14:34
【问题描述】：

我使用 blendid 创建了一个新应用，将 gulp 任务完美地结合到可配置的资产管道和静态站点构建器中

html

 <h1 data-module="hoverEnlarge">{{ message }}</h1>

js结构

app.js
|_____ modules
      |_______index.js
      |_______hoverEnlarge.js

js - app.js

import './modules'
console.log(`app.js has loaded!`)

js - 模块/index.js

/*
  Automatically instantiates modules based on data-attributes
  specifying module file-names.
*/

const moduleElements = document.querySelectorAll('[data-module]')

for (var i = 0; i < moduleElements.length; i++) {
  const el = moduleElements[i]
  const name = el.getAttribute('data-module')
  const Module = require(`./${name}`).default
  new Module(el)
}

/*
  Usage:
  ======

  html
  ----
  <button data-module="disappear">disappear!</button>

  js
  --
  // modules/disappear.js
  export default class Disappear {
    constructor(el) {
      el.style.display = 'none'
    }
  }
*/

js - 模块/hoverEnlarge.js

import anime from 'animejs';

export default class hoverEnlarge {
  constructor(el) {
    var buttonEl = el;

function animateButton(scale, duration, elasticity) {
  anime.remove(buttonEl);
  anime({
    targets: buttonEl,
    scale: scale,
    duration: duration,
    elasticity: elasticity
  });
}

function enterButton() { animateButton(1.2, 800, 400) };
function leaveButton() { animateButton(1.0, 600, 300) };

buttonEl.addEventListener('mouseenter', enterButton, false);
buttonEl.addEventListener('mouseleave', leaveButton, false);
    console.log(el.textContent, '- Enlarge hover effect')
  }
}

这可行。 前面已经解释过了，h1 data-module="hoverEnlarge" 指的是它的模块。

hoverEnlarge 是悬停效果。我想创建带有效果的 js 文件夹以包含在未来的项目中，只需克隆此存储库即可。所以，我们有 hoverEnlarge.js、hoverReduce.js、hoverSelect.js 等等。

有什么问题？ 子文件夹不起作用。如果我想要这样的结构：

app.js
|_____ modules/
      |_______index.js
      |_______hoverEffects/
      |        |_______hoverEnlarge.js
      |        |_______hoverReduce.js
      |        |_______hoverSelect.js
      |________otherEffectsFolder/
               |________effect1.js
               |________effect2.js

如果我尝试将 hoverEnlarge 放在这里：js/modules/hover/hoverEnlarge.js 它不起作用，我收到此错误

ERROR in /Applications/MAMP/htdocs/crystal/src/javascripts/animejs/index.js
Module build failed: Error: ENOENT: no such file or directory, open '/Applications/MAMP/htdocs/crystal/src/javascripts/animejs/index.js'
 @ /Applications/MAMP/htdocs/crystal/src/javascripts/modules/hover/hoverEnlarge.js 3:0-28
 @ /Applications/MAMP/htdocs/crystal/src/javascripts/modules ^\.\/.*$
 @ /Applications/MAMP/htdocs/crystal/src/javascripts/modules/index.js
 @ /Applications/MAMP/htdocs/crystal/src/javascripts/app.js
 @ multi webpack-hot-middleware/client?reload=true&noInfo=false&quiet=true&react=false ./app.js

我应该如何进行？

【问题讨论】：

标签： javascript webpack gulp browserify

【解决方案1】：

解决了。

只需将完整路径放在数据模块中

<h1 data-module="path/to/file">{{ message }}</h1>

【讨论】：