NPM + Zurb Foundation + WebPack:无法解析模块“基础" [英] NPM + Zurb Foundation + WebPack: Cannot resolve module 'foundation'

问题描述

我正在将 Zurb Foundation 与 WebPack 和 NPM 结合使用，没有 Bower.

我遇到的问题和下面的一样:

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

本质上，当通过 NPM 安装基础站点时，存在对未找到的模块基础"的引用.错误:

未找到模块:错误:无法解析 c:\Users\Matt\Documents\Projects\test\node_modules\foundation-sites\dist 中的模块基础"@ ./~/foundation-sites/dist/foundation.js

这是 package.json:

<代码>{"name": "测试","版本": "1.0.0",描述": ""，"main": "index.js",脚本":{"test": "echo \"Error: no test specified\" && exit 1","dev": "webpack-dev-server"},作者": ""，"license": "ISC",依赖关系":{"基础站点": "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");模块.出口 = {入口: {主:./app/js/main.js"},输出: {路径:__目录名，文件名:bundle.js"},模块: {装载机: [{ 测试:/\.css$/, 加载器: "style!css" },{测试:/\.scss$/,加载器:[样式"，css"，sass"]},{ 测试:/\.vue$/，加载器:'vue' }],解决: {模块目录:['node_modules']}},sassLoader:{includePaths: [path.resolve(__dirname, "./node_modules/foundation-sites/scss/")]},开发服务器:{代理人: {'/api/*':{目标:'http://localhost:4567',安全:假}}}};

我可以通过通过 bower 加入基础来解决这个问题，但我想取消 bower 并只使用 NPM.

解决方案

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

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

在webpack.conf.js中，使用externals(也许有另一种没有externals的方法，但对我来说，这已经足够了):

外部:{jQuery: 'jQuery',基金会:'基金会'},

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

//jQueryvar $ = require('jquery');global.jQuery = $;//如果你想要基础的所有功能require('./node_modules_folder/foundation-sites/dist/foundation.js');//如果你只想要一些功能//require('./node_modules/what-input/what-input');//require('./node_modules/foundation-sites/js/foundation.core');//require('./node_modules/foundation-sites/js/....');导出默认基础；

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

import Foundation from './libs/foundation';

I am working on using Zurb Foundation with WebPack and NPM, without Bower.

The problem I am encountering is the same as this below:

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

Essentially, when installing foundation-sites via NPM, there are references to a module "foundation" that is not found. The error:

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 

Here's the 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"
  }
}

And here is 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
            }
        }
    }
};

I can work around this by including foundation via bower instead, but I want to eliminate bower and use only NPM.

解决方案

I have same problem, but I don't want have two .js files (vendor and app)!

For me, everything need be on a single file, so, I make this:

In webpack.conf.js, use externals (maybe have another way without external, but for me, this is sufficient):

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

create a file in your source folder (any name, like /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;

now, you can use Foundation in any js using following syntax:

import Foundation from './libs/foundation';

这篇关于NPM + Zurb Foundation + WebPack:无法解析模块“基础"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！