lpiepiora / bower-webpack-plugin Goto Github PK
View Code? Open in Web Editor NEWBower Webpack Plugin
Bower Webpack Plugin
Config:
resolve: {
modulesDirectories: [
destPath,
'node_modules',
'web_modules'
]
...
plugins: [
...
new BowerWebpackPlugin({
excludes: /.*\.less/
}),
..
Causes an error:
ERROR in (webpack)-dev-server/client?http://localhost:3000
Module not found: Error: No bower component: /Users/[bower_components]/socket.io/[bower.json]
@ (webpack)-dev-server/client?http://localhost:3000 1:9-29
Requesting a module, using the alias should resolve the actual name.
E.g. given resolve.alias: { xyz: "modu" }
, the require("xyz")
should resolve to /abc/bower_components/modu/bower.json
.
See #1
The example needs to add the Bootstrap CSS to work correctly. Adding ...
require("./bower_components/bootstrap/dist/css/bootstrap.min.css");
... to entry.js seems to fix it.
Also the specified index.html has 'Bowerk Webpack Plugin' instead of 'Bower Webpack Plugin'
Hope that helps.
When I require "react", I only get the last module "react-dom" .
because of the bower.json 'main' field is an array.
{
"name": "react",
"main": ["react.js","react-dom.js"],
"ignore": []
}
Hi,
I try to integrate some bower packages in a boilerplate project : react-starter-kit that uses webpack.
I setted up this branch to try it :
https://github.com/hokkos/react-starter-kit/tree/BowerIntegration
It seems the require('d3') is correct in the entry javascript file : src/app.js, but not in a nested javascript file : src/components/Link.js
I can't make it works. If you have an idea, thanks a lot.
When using a custom directory for bower modules, unless explicitly pointed at this directory in the webpack configuration, this plugin fails to resolve any modules.
The expected bower behaviour is to install and resolve components to the directory specified in configuration, which defaults to bower_components when left unspecified.
So I found that now it works. But I got yet another trouble. :)
After bower install videojs
we will get bower.json
:
...
"main": [
"dist/video-js/video.js",
"dist/video-js/video-js.css"
],
...
This will compile to:
function(module, exports, __webpack_require__) {
module.exports = __webpack_require__(18);
module.exports = __webpack_require__(19);
/***/ },
And it will not work correctly because we will take last file - CSS.
Can you supply 2? Some repositories have .bower.js with a proceeding dot and vice versa.
I tried
new BowerWebpackPlugin({
manifestFiles: ["bower.json", ".bower.json"]
}),
webpack src/index.js assets/bundle.js
-------
module.exports = require("./dist/jquery.js");
-------
Hash: e66002ae5e5c3fd56461
Version: webpack 1.4.15
Time: 1644ms
Asset Size Chunks Chunk Names
bundle.js 615622 0 [emitted] main
[10] jquery (bower component) -1 [built] [failed]
+ 165 hidden modules
ERROR in jquery (bower component)
Module build failed: SyntaxError: Unexpected token m
at Object.parse (native)
at Object.module.exports (/Users/hh-webpack/node_modules/json-loader/index.js:10:19)
@ ./index.js 1:8-25
It seems that simply the presence of this plugin in my webpack config prevents exposed variables from getting to the browser. In my setup below, I should have window.$ and window.jQuery available to the browser. I'm not sure if I'm misunderstanding something w/ either this plugin or webpack, or if I've encountered a bug.
Here is my config where everything works as expected and the browser gets its two vars:
var path = require("path");
var webpack = require("webpack");
module.exports = {
context: __dirname + '/frontend', // the project dir
entry: {
_application: __dirname + "/frontend/javascripts/_application.coffee"
},
output: {
filename: '[name].bundle.js',
// We want to save the bundle in the same directory as the other JS.
path: __dirname + '/app/assets/javascripts/webpack',
sourceMapFilename: 'webpack/[file].map'
},
resolve: {
root: [path.join(__dirname, "javascripts"),
path.join(__dirname, "stylesheets")],
extensions: ["", ".js", ".jsx", ".scss", ".css", ".sass", "config.js"]
},
module: {
loaders: [
{ test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader?experimental&optional=runtime' },
{ test: /\.coffee$/, loader: "coffee-loader" },
{ test: require.resolve("jquery"), loader: "expose?jQuery" },
{ test: require.resolve("jquery"), loader: "expose?$" }
]
}
};
And here's my output. Notice the module count:
Hash: 3a2446f63dff7fbe0421
Version: webpack 1.7.3
Time: 1824ms
Asset Size Chunks Chunk Names
_application.bundle.js 1.47 MB 0 [emitted] _application
+ 175 hidden modules
Now when I include this plugin the way I think I want to:
var path = require("path");
var webpack = require("webpack");
var BowerWebpackPlugin = require("bower-webpack-plugin");
module.exports = {
context: __dirname + '/frontend', // the project dir
entry: {
_application: __dirname + "/frontend/javascripts/_application.coffee"
},
output: {
filename: '[name].bundle.js',
// We want to save the bundle in the same directory as the other JS.
path: __dirname + '/app/assets/javascripts/webpack',
sourceMapFilename: 'webpack/[file].map'
},
resolve: {
root: [path.join(__dirname, "javascripts"),
path.join(__dirname, "stylesheets")],
extensions: ["", ".js", ".jsx", ".scss", ".css", ".sass", "config.js"]
},
plugins: [
new BowerWebpackPlugin({
excludes: /.*\.less/
}),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
],
module: {
loaders: [
{ test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader?experimental&optional=runtime' },
{ test: /\.coffee$/, loader: "coffee-loader" },
{ test: require.resolve("jquery"), loader: "expose?jQuery" },
{ test: require.resolve("jquery"), loader: "expose?$" }
]
}
};
My output is the following. Notice two less modules than before:
Note: The code generator has deoptimised the styling of "/Users/EricFields/Development/vanda/frontend/bower_components/jquery/dist/jquery.js" as it exceeds the max of "100KB".
Hash: 088000ddc3b4debaf043
Version: webpack 1.7.3
Time: 4625ms
Asset Size Chunks Chunk Names
_application.bundle.js 1.36 MB 0 [emitted] _application
[2] jquery (bower component) 45 bytes {0} [built]
+ 173 hidden modules
In this scenario, window.$ and window.jQuery are no longer available.
I'd love some help or insight. Happy to provide more details. Thank you.
Hi,
I am trying to exclude 'angular' from being loaded via the BowerWebpackPlugin in favour of using the npm package, but for some reason this does not seem to work. The 'excludes' regular expression seems to be ignored and the package still loads via bower.
new BowerWebpackPlugin({
modulesDirectories: ["js/libs/bower_components"],
manifestFiles: "bower.json",
includes: /.*/,
excludes: [/angular/],
searchResolveModulesDirectories: false
}),
Hi,
after installing a node module that has a bower.json inside and wanting to require this module (reflux in my example); it seems bower-webpack-plugin mess with it and fail to recognize it is a npm module :
ERROR in reflux (bower component)
Module not found: Error: Cannot resolve 'file' or 'directory' ./dist/reflux.js in C:\Users\hokkos\Code\reflux-webpack-example\node_modules\reflux
@ reflux (bower component) 1:17-44
Here is a reproduction of the error :
https://github.com/hokkos/reflux-webpack-example
npm install
npm run start
It fails; comment the line in package.json file :
plugins: [new BowerWebpackPlugin()]
And it works.
Thanks.
I am using angular js , and a module i try http://likeastore.github.io/ngDialog/ also requiring angular.js and is getting failed.
require('angular')
inside ngDialog is looking for angular inside node_modules instead of bower_components
Can we consider adding overrides
support in project's bower.json or as an option object? The same way as wiredep and main-bower-files do. Fortunately, it should be limited to main
keys.
Passing overrides
as an option would be also great because it provides some opportunities of the decisions during build process.
This would also solve #19.
Hi!
I found that this plugin ignores resolve.modulesDirectories
configuration option. In my case it is set to ["node_modules", "bower_components"]
and I want webpack to look at node_module
first, but instead I get my deps that are available in both node_modules
and bower_components
bundled from last one. May be I just missed something.
Module not found: Error: Cannot resolve module 'jquery'
When I require "react", I only get the last module "react-dom" .
because of the bower.json 'main' field is an array.
{
"name": "react",
"main": ["react.js","react-dom.js"],
"ignore": []
}
But ,I want get both of the module ,how to resolve this ,thank you !
The plugin should re-use existing resolve.modulesDirectories
configuration when resolving modules.
Hi friends.
Please help me with this. I try to use BowerWebpack for looking for bower_components, but it seems get only js file, how about css file. Thanks !
require('select2.css'); //This line is not work
require('select2'); //this line work as expect
I was previously having an issue with js-data
which turned out to be because of this plugin. It seems that any plugin that contains a proper UMD definition will mess up globals inside of that script.
I have an example repo of this over here. This behaviour also occurs with angular-moment
.
Is there any way to fix this so that I can load modules that don't need to be shimmed?
Here's how I reproduce the problem, maybe you can tell me what is going wrong?
git clone [email protected]:angular-class/angular2-webpack-starter.git
cd angular2-webpack-starter/
bower install bootstrap
bower install jquery
npm install --save-dev webpack file-loader style-loader css-loader bower-webpack-plugin
npm install
Edit the webpack.config.js to add these lines:
var BowerWebpackPlugin = require('bower-webpack-plugin');
Change the config.plugins line to this:
config.plugins = [].concat(
new BowerWebpackPlugin(),
newwebpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
}),
combine_common_chunks, environment_plugins.all, environment_plugins[NODE_ENV]);
Then when I run rm -rf build; NODE_ENV=development npm run webpack --colors --display-error-details --display-cached
It blows up with tons of errors.
Any idea? Thanks in advance for your help.
some bower_componentse`s bower.json has no setting "main" ๏ผ so, when I require the bower_component , it is error ! , how I should do ?
Hi,
I re-did your example and when doing :
webpack --progress --colors
It shows :
54% 3/4 build modules
and hangs, never finish, and eat up RAM.
I'm having trouble figuring out how to add libraries that are added to jQuery, for example MaterializeCSS.
This is the error I'm getting:
Uncaught TypeError: $(...).dropdown is not a function
My plugins in my config looks like this:
plugins: [
new BowerWebpackPlugin(),
new webpack.ProvidePlugin({
$: 'jquery',
Vue: 'vue',
VueResource: 'vue-resource',
VueRouter: 'vue-router'
})
],
Handle module dependencies. When a bower manifest declares a dependency on some other module, the referenced module should be also included.
For example, if for module X, a bower.json
contains:
"dependencies": {
"jquery": ">= 1.9.0"
}
then, when the module is required via require("x")
, the require("jquery")
should be automatically added.
Is this plugin under the MIT license? If so, can you add the license file? Happy to add it and submit a PR @lpiepiora
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.