使用webpack与凉亭

Question

使用webpack与凉亭

我有一个基本的ReactJS应用程序.我使用webpack,并希望使用来自凉亭的模块.我安装了bower-webpack-plugin并在bower中添加了jquery库.

webpack.config.js

var BowerWebpackPlugin = require("bower-webpack-plugin");
var webpack = require("webpack");

module.exports = {
    entry: './index.jsx',
    output: {
        filename: 'bundle.js',
        publicPath: 'http://localhost:8090/assets'
    },
    module: {
        loaders: [
            {
                //tell webpack to use jsx-loader for all *.jsx files
                test: /\.jsx$/,
                loader: 'jsx-loader?insertPragma=React.DOM&harmony'
            }
        ]
    },
    plugins: [
        new BowerWebpackPlugin(),
        new webpack.ProvidePlugin({
            $: 'jquery',
        })
    ],
    externals: {
        //don't bundle the 'react' npm package with our bundle.js
        //but get it from a global 'React' variable
        'react': 'React'
    },
    resolve: {
        extensions: ['', '.js', '.jsx'],
        alias: {
            jquery: "./bower_components/jquery/dist/jquery.js"
        }
    }
}

Run Code Online (Sandbox Code Playgroud)

编辑:现在我使用这个webpack配置与bower依赖,没有bower-webpack-plugin

bower.json

{
  "name": "jquery",
  "version": "2.1.4",
  "main": "dist/jquery.js",
  "license": "MIT",
  "ignore": [
    "**/.*",
    "build",
    "dist/cdn",
    "speed",
    "test",
    "*.md",
    "AUTHORS.txt",
    "Gruntfile.js",
    "package.json"
  ],
  "devDependencies": {
    "sizzle": "2.1.1-jquery.2.1.2",
    "requirejs": "2.1.10",
    "qunit": "1.14.0",
    "sinon": "1.8.1"
  },
  "keywords": [
    "jquery",
    "javascript",
    "library"
  ]
}

Run Code Online (Sandbox Code Playgroud)

的index.html

<!DOCTYPE html>
<html>
<head>
    <title>Basic Property Grid</title>
    <!-- include react -->
    <script src="./node_modules/react/dist/react-with-addons.js"></script>
</head>
<body>
    <div id="content">
        <!-- this is where the root react component will get rendered -->
    </div>
    <!-- include the webpack-dev-server script so our scripts get reloaded when we make a change -->
    <!-- we'll run the webpack dev server on port 8090, so make sure it is correct -->
    <script src="http://localhost:8090/webpack-dev-server.js"></script>
    <!-- include the bundle that contains all our scripts, produced by webpack -->
    <!-- the bundle is served by the webpack-dev-server, so serve it also from localhost:8090 -->
    <script type="text/javascript" src="http://localhost:8090/assets/bundle.js"></script>

    <script type="text/javascript">

$(document).ready(function(){
 $("body").append("This is Hello World by JQuery");
});

</script>

</body>
</html>

Run Code Online (Sandbox Code Playgroud)

当我打开主页时,我收到错误消息:"$未定义".

项目结构

Answer 1

Alm*_*uro 11

首先,也许你只是忘了,但是可以肯定的是,我想指出你似乎bower.json在你的问题中向我们展示了jquery 文件.您的项目实际上似乎没有bower.json根文件.

如果你想使用鲍尔管理的依赖,确保你有一个bower.json运行bower init在你的项目的根目录,然后实例运行bower install --save jquery.

有关更多信息,请参阅凉亭文档 ;)

除此之外,问题是您正在尝试使用jQuery index.html,因此不是在webpack管理的模块中.
Webpack实际上并没有处理index.html上的任何内容.

我的意思是,把你的jQuery代码放进去index.jsx,而不是把它放进去index.html:

// index.jsx
$(document).ready(function(){
 $("body").append("This is Hello World by JQuery");
});

Run Code Online (Sandbox Code Playgroud)

它应该工作!

你也可以删除这段代码,因为BowerWebpackPlugin你的句柄:

alias: {
   jquery: "./bower_components/jquery/dist/jquery.js"
}

Run Code Online (Sandbox Code Playgroud)

它是如何工作的？

index.jsx 通过Webpack加载.
$用作自由变量,但由于ProvidePlugin它,它将解决require("jquery")
require("jquery")解决了从bower components文件夹中导入jQuery 的问题BowerWepackPlugin.

没有ProvidePlugin和只有BowerWebpackPlugin,你将不得不写:

// index.jsx
var $ = require("jquery");

$(document).ready(function(){
 $("body").append("This is Hello World by JQuery");
});

Run Code Online (Sandbox Code Playgroud)

归档时间：	10 年，5 月前
查看次数：	9991 次
最近记录：	8 年，8 月前