相关疑难解决方法(0)

我正在尝试使用这个 npm 包https://www.npmjs.com/package/masonry-layout

根据我运行的安装说明：

npm install masonry-layout --save

然后在我的文件中，

import '../../../node_modules/masonry-layout/dist/masonry.pkgd.min.js'

$('.blog-posts-container').masonry({
    // options ...
    itemSelector: '.card-blog',
    columnWidth: 200
})

我尝试将包导入到我的文件中并运行它，但出现此错误：

Uncaught TypeError: $(...).masonry is not a function

我认为我在这里的导入有问题。我究竟做错了什么？

PS我正在使用webpack

我是否必须从npm安装，或者如何只需要从jquery网站下载文件，如何使用webpack要求jquery文件？

目录

app/
./assets/javascripts/article/create/base.js
./assets/javascripts/lib/jquery-1.11.1.min.js
webpack.config.js

base.js错误

require('../../../lib/jquery-1.11.1.min.js'); 
var Content = function() {
};
module.exports = Content;

webpack.config.js

module.exports = {
  entry: {
    'ArticleCreate':['./assets/javascripts/Article/Create/Base.js']
  },
  output: {
    path: './assets/javascripts/bundle/',
    filename: '[name].js'
  }
};

我正在从资产管道迁移到Rails 4应用程序中的Webpack 2。除了在.js.erb视图中使用jQuery的JS代码外，其他一切似乎都可以正常工作。

webpack.config.js的内容如下（指纹和压缩的省略代码）：

const path = require('path')
const webpack = require('webpack')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const jsOutputTemplate = 'javascripts/[name].js'
const cssOutputTemplate = 'stylesheets/[name].css'

module.exports = {
  context: path.join(__dirname, '/app/assets'),
  entry: {
    application: ['./javascripts/application.js', './stylesheets/application.scss']
  },
  output: {
    path: path.join(__dirname, '/public'),
    filename: jsOutputTemplate
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          presets: ['es2015']
        }
      },
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract(['css-loader', 'resolve-url-loader'])
      },
      {
        test: /\.s(a|c)ss$/,
        use: ExtractTextPlugin.extract(['css-loader', 'resolve-url-loader', 'sass-loader?sourceMap'])
      },
      { …

我正在使用webpack 3& 尝试使用string replace loader。

此代码用于在 webpack1.X 中工作

module: {
    loaders: [
      {
        test: /fileName\.js$/,
        loader: 'string-replace',
        query: {
          search: 'jQuery',
          replace: 'window.$'
        }
      }
    ]
  }

我也试过这个：

module: {
        loaders: [
          {
            test: /fileName\.js$/,
            loader: 'string-replace-loader',
            query: {
              search: 'jQuery',
              replace: 'window.$'
            }
          }
        ]
      }

我需要做什么来确保这个加载器在 webpack 3 中工作。没有错误，但字符串没有在目标文件中被替换。

我一直在尝试通过webpack加载一个jquery插件.此插件打包为npm模块,其依赖项仅包含jquery.我认为webpack加载了jquery的实例,而不是使用我提供的全局提供的ProvidePlugin.我尝试了另一个stackoverflow帖子中提供的所有解决方案(在webpack中管理jQuery插件依赖项),但他们没有成功; 结果总是一样的:"terminal()不是函数".如果我手动修改node_modules文件夹中的包,删除package.json中的jquery依赖项,并在node_modules插件文件夹中下载的依赖项webpack成功地将该插件与jquery的全局实例绑定.我知道,我可以简单地创建该包的一个分支并使用私有的npm存储库,但我想使用官方包.

这是我的webpack配置:

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var CleanWebpackPlugin = require('clean-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var moment = require('moment');
var path = require('path');
var environment = process.env.APP_ENVIRONMENT || 'dev';

module.exports = {

  entry: {
    'app': './src/main.ts',
    'polyfills': './src/polyfills.ts',
    'vendor': './src/vendor.ts'
  },
  /*devtool: 'source-map',*/
  output: {
    path: './dist',
    filename: '[name].browser.' + moment().format('DDMMYYYYHHmm') + '.js'
  },
  module: {
    loaders: [
      { test: /\.component.ts$/, loader: 'ts!angular2-template' },
      { test: /\.ts$/, exclude: /\.component.ts$/, loader: …

我正在使用webpack创建* .js捆绑包

var path = require('path');
var webpack = require('webpack');

const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
    entry: {
        site: [
            './wwwroot/js/site.js',
            './node_modules/jquery/dist/jquery.js',
            './Scripts/jquery.global.js',
            './node_modules/jquery-validation/dist/jquery.validate.js',
            './node_modules/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js',
            './node_modules/popper.js/dist/popper.js',
            './node_modules/bootstrap/dist/js/bootstrap.js',
        ]
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'wwwroot/dist/')
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                loader: 'ts-loader',
                exclude: /node_modules/,
            },
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: 'css-loader'
                })
            },
        ]
    },
    resolve: {
        extensions: [".tsx", ".ts", ".js", ".css"]
    },
    plugins: [
        new ExtractTextPlugin('../css/bundle.css'),
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: …

将库包含到角4.0并在组件内使用它的正确工作流程是什么？

我的步骤:

yarn add mathjs

然后应该有一种方法在一个构建生命周期中注入js库,以便angular4组件可以使用它.JHipster使用Webpack和Yarn.

然后我尝试添加到Component(docs):

import { mathjs } from "./mathjs";  

和

var math = require('mathjs');

那些没有用.我错过了什么？

更新:

似乎mathjs使用较旧的方法建议var math = require('mathjs').也许它在某种程度上类似于JQuery问题 ......

UPDATE2

我正在尝试打开自举模态，但无法在全日历角度2中工作。

dayClick: function(date, jsEvent, view) {
        (<any>$('#myModal33')).modal('show');
        $('#click_date').val(date._d);
      }

我得到：

WEBPACK_IMPORTED_MODULE_5_jquery（...）。modal不是函数

如果我删除它，import * as $ from 'jquery';那么模态就可以了，但是我也需要jQuery。

我在 jquery 中使用打字稿，但我不断收到

未捕获的类型错误：$ 不是函数

有没有人见过这个？

我正在将 typescript 编译为 ES2017，然后使用 webpack 编译为 ES5。

//tsconfig
{
      "compileOnSave": true,
      "compilerOptions": {
        "module": "es2015",

        "removeComments": true,
        "preserveConstEnums": true,
        "sourceMap": true,
        "target": "es2017",
        "noImplicitAny": false,
        "outDir": "Output",
        "esModuleInterop": true

      }
    }

如何使用 jquery

import * as $ from "jquery";
 var form = $(document.createElement('form'));

浏览器看到jquery($)

但后来我明白了

我有一个React Redux应用程序。我添加了实现作为CSS框架，但实现需要jquery。所以我安装了Jquery并通过npm将其添加到我的项目中。如果我这样导入jQuery

import $ from 'jquery';

没有抛出任何错误，并且无法使用它。但仅在该组件上。所以我添加了wepback插件，这样我就可以在我的react应用程序中调用$了。但是，当我按照webpacks 网站上的说明进行操作时，出现以下错误。

Line 13:  '$' is not defined 

对这是为什么有什么想法？

app.js

import React  from 'react';
import '../styles/index.css';
import Header from './header/Header';

class App extends React.Component {
    constructor(props){
        super(props);
        console.log('Application ready');
    }
    componentWillMount(){
        $('ul.tabs').tabs();
    }
    render = () => (
        <div>
            <Header />
            <div>
                {this.props.children}
            </div>
        </div>
    )
}
export default App;

webpack.config.dev.js

    alias: {

  // Support React Native Web
  // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
  'react-native': 'react-native-web',
  jquery: "jquery/src/jquery" // What i added 
  // $: "jquery/src/jquery" 
},

jQuery在node_modules文件夹中，从npm安装开始，我没有将其添加到任何其他位置。