NPM + Zurb Foundation + WebPack:无法解析模块'基础'

Question

我正在使用Zurb Foundation与WebPack和NPM,没有 Bower.

我遇到的问题与下面的问题相同:

https://github.com/zurb/foundation-sites/issues/7386

基本上,当通过NPM安装基础站点时,会引用未找到的模块"基础".错误:

Module not found: Error: Cannot resolve module 'foundation' in c:\Users\Matt\Documents\Projects\test\node_modules\foundation-sites\dist
 @ ./~/foundation-sites/dist/foundation.js 

这是package.json:

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "foundation-sites": "6.0.5",
    "webpack": "~1.12.6",
    "webpack-dev-server": "~1.2",
    "jquery": "2.1.1"
  }
}

这是webpack.config.js:

var path = require("path");
var webpack = require("webpack");
module.exports = {
    entry: {
      main: "./app/js/main.js"
    },
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: "style!css" },
            {
                test: /\.scss$/,
                loaders: ["style", "css", "sass"]
              },
              { test: /\.vue$/, loader: 'vue' }
        ],
        resolve: {
            modulesDirectories: ['node_modules']
        }
    },
     sassLoader: {
            includePaths: [path.resolve(__dirname, "./node_modules/foundation-sites/scss/")]
          },
    devServer: {
        proxy: {
            '/api/*': {
                target: 'http://localhost:4567',
                secure: false
            }
        }
    }
};

我可以通过凉亭包括基础来解决这个问题,但我想消除凉亭并仅使用NPM.

Answer 1

我有同样的问题,但我不想要两个.js文件(供应商和应用程序)!

对我来说,一切都需要在一个文件上,所以,我这样做:

在webpack.conf.js中,使用externals(可能有其他方式没有外部,但对我来说,这就足够了):

externals: {
    jQuery: 'jQuery',
    foundation: 'Foundation'
},

在源文件夹中创建一个文件(任何名称,如/libs/foundation.js):

// jQuery
var $ = require('jquery');
global.jQuery = $;

// if you want all features of foundation
require('./node_modules_folder/foundation-sites/dist/foundation.js');

// if you want only some features
// require('./node_modules/what-input/what-input');
// require('./node_modules/foundation-sites/js/foundation.core');
// require('./node_modules/foundation-sites/js/....');

export default Foundation;

现在,您可以使用以下语法在任何js中使用Foundation:

import Foundation from './libs/foundation';

Answer 2

我能够通过webpack实现这一点,基本上是将其作为模块加载.

这基本上是一个黑客,但基金会确实需要将其JS更新为可加载的commonJS模块.

问题源于Foundation的JS在源代码中嵌套的IFFE中以不稳定的方式引用依赖关系.有时jQuery是本地jQuery参数,有时它是$,有时它是window.jQuery.这真的是一个混合包.所有不同机制的组合意味着除了非模块化地加载物品之外,没有单一的匀场解决方案.

老实说,那里几乎是业余时间,但在撰写本文时,他们上周刚刚发布了这个内容,所以希望它很快就能解决.

Anyhoo ...对黑客:

我制作一个单独的供应商捆绑并加载所有业余时间的第三方npm库,因为我厌倦了与包装运输不良的开源npm包代码所需的各种填充机制的斗争.

我的供应商包是一个单独的入口点,我在webpack中注册,它包含所有不能很好地作为模块运行的库.

require('!!script!jquery/dist/jquery.min.js');

require('!!script!uglify!foundation-sites/js/foundation.core.js');
require('!!script!uglify!foundation-sites/js/foundation.accordion.js');
require('!!script!uglify!foundation-sites/js/foundation.util.keyboard.js');
require('!!script!uglify!foundation-sites/js/foundation.util.motion.js');
// etc.

确保安装了脚本加载器

npm install script-loader -D

!! 表示"忽略我在配置中定义的所有其他规则".使用脚本加载器告诉webpack在窗口范围内加载和执行文件,就像在页面上包含脚本标记一样.(但事实并非如此.)

你可以变得更好,并编写自己的解决规则,以便它只检查基础库中的东西,但我没有打扰因为我希望像基金会一样普遍的图书馆在不久的将来一起行动所以我可以删除这个黑客.

另外......在你的主webpack配置中,你将要引用jQuery和以这种方式加载的任何其他全局窗口变量作为外部.

var webpackConfig = {
    entry: { // blah },
    output: { // blah },
    loaders: [ // blah ],
    externals: {
        jquery: "jQuery"
    }
};

Answer 3

我会根据Mason Houtz和pharmakon的好答案发布我的完整解决方法,以防有人帮忙,因为我有点挣扎,在这个过程中学习Webpack.

在我的情况下,我有一个额外的复杂性,因为其他jQuery插件只是在他们自己的模块内部工作,而在他们的属性之外undefined.显然他们使用的是本地的重复jQuery对象.

无论如何,这是你需要做的:

1. 安装scripts-loader: npm install --save-dev script-loader

2. 在Webpack的配置中:

   • 添加新条目,我们称之为vendor.vendor.js每当Webpack运行时,这将编译一个新的.

     entry: {
         ...,
         "vendor": [
             "!!script!jquery/dist/jquery.min.js",
             "!!script!foundation-sites/dist/foundation.min.js"
         ]
     },
     

   • 添加jquery到外部.这样可以确保对jquery主JS内部的任何引用都将替换为对全局jQuery变量的引用,该变量由vendor.js上面提供.

     entry : {
         // ...
     },
     externals: {
         jquery: "jQuery"
     }
     

3. 确保使用jQuery的每个模块都导入它:

   var $ = require('jquery');
   

externals上面的配置将使用对全局jQuery变量的引用替换它,而不是"正确"重新导入重复的jQuery.您可以选择使用ProvidePlugin,它会在模块中遇到jQuery时自动执行上述操作,从而为您节省一些按键.如果你想要,请将以下内容放在Webpack的配置中:

plugins: [
    // ...,
    new webpack.ProvidePlugin({
      '$': 'jquery', 
      jQuery: 'jquery'
    })
]

4. vendor.js在主JS之前显然包括新页面.

很可能有更简单或更优雅的方式来实现这一点,但我只想要一个快速,有效的解决方案,直到基金会希望很快解决问题.

Answer 4

只需使用script-loader(npm i script-loader)并在导入前添加一个script!.然后它将在全球范围内进行评估.

要从基础加载所有js文件,请使用此方法

import 'script!jquery'
import 'script!what-input'
import 'script!foundation-sites'

就像我在我的切入点那样做

您可以查看我的样板项目进行试用:https://github.com/timaschew/r3-foundation-boilerplate