I'm trying to load jquery + jquery-ui + bootstrap inside my project throught NPM and gulp.
My configuration is this:
Package.json
"browser": {
"jquery": "/node_modules/jquery/dist/jquery.js",
"jquery-ui": "/node_modules/jquery-ui-browserify/jquery-ui.js"
},
"browserify-shim": {
"jquery": "$",
"jquery-ui": {
"exports": "jquery-ui",
"depends": [ "jquery:jQuery" ]
}
},
"browserify": {
"transform": [ "browserify-shim" ]
},
"dependencies": {
"bootstrap": "^3.3.6",
"jquery": "2.1.0",
"jquery-ui-browserify": "^1.11.0-pre-seelio",
}
gulpfile.js
gulp.task('browserify', function(){
return browserify([
'node_modules/jquery/dist/jquery.js',
'node_modules/jquery-ui-browserify/dist/jquery-ui.js',
'node_modules/bootstrap/dist/js/bootstrap.js',
])
.bundle()
.pipe(source('core.js'))
.pipe(buffer())
.pipe(gulp.dest('build/js'));
});
Then I load core.js with assetic from my index.php but I get this error:
Uncaught ReferenceError: jQuery is not defined
What am I doing wrong?
Thank you.
I don't know what you're trying to do there but keep in mind that what you should pass to the browserify instance is the entry point of your application, not your dependencies.
Then in your application you can use the require function to load those dependencies:
var $ = require('jquery');
While compiling browserify will autonomously do two things for you:
He will put into your bundle any library you required.
He will resolve your require statements by replacing them with a reference to the bundled copy of that library.
As long as the library is installed through npm you don't need any additional configuration. On the other hand if the library is situated in an unconventional location you'll need to tell browserify how to resolve it.
Anyway you can find more documentation on the repo's readme
Related
I have one react-native app in which I am using "json-schema-rules" library. Now I have also created one library which is getting used in my react-native app like this "file:../custom_library" in package.json.
Now to resolve the version conflict, I decided to use "json-schema-rules" as a peer dependency in my custom library. So, the package.json is like this
Package.json of my react-native app:
{
"dependencies": {
"json-rules-engine": "^2.3.0",
"custom_library": "file:../custom_library"
}
}
package.json of my custom_library:{
"peerDependencies": {
"json-schema-rules": "^2.3.0"
}
}
Now the problem is, whenever I am using metro bundler, I get an error
error: bundling failed: Error: Unable to resolve module json-rules-engine
json-rules-engine could not be found within the project.
This is the case when I am using it in peerDependencies, I do not get any error if I use this library in dependencies.
Please help.
You can try to add an alias for the module in your project's babel config.
This means that when your custom packages tries to import "json-rules-engine" it will get served the version from the main app.
First install 'babel-plugin-module-resolver' then configure the alias in "module-resolver"
babel.config.js
const config = {
presets: ["module:metro-react-native-babel-preset"],
plugins: [
[
"module-resolver",
{
root: ["./src"],
extensions: [".js", ".jsx", ".ios.js", ".android.js"],
alias: {
"json-rules-engine": require.resolve("json-rules-engine")
}
}
]
]
};
module.exports = config;
I have installed waypoints with using bower. I can see that there is a folder for shortcuts inside of its /lib folder, containing the shortcuts for infinite.js inview.js and sticky.js. My question is how I can actually access them in my project using bower.
I am using gulp to package all of my JavaScript for this project, so I am using "main-bower-files" to compile all of the library javascript files into a single file.
I have modified the bower.json so that waypoints will use the jquery version by doing the following
"dependencies": {
"jquery": "^3.3.1",
"waypoints": "^4.0.1"
},
"overrides" : {
"waypoints" : {
"main": "lib/jquery.waypoints.js"
}
}
But I do not know how I can include the /shortcuts/inview.js using this method. Is it possible to use npm or bower to get access to these files?
Should be able to just add it to "main" I would think:
"dependencies": {
"jquery": "^3.3.1",
"waypoints": "^4.0.1"
},
"overrides" : {
"waypoints" : {
"main": [
"lib/jquery.waypoints.js",
"lib/shortcuts/sticky.js"
]
}
}
The FileAPI library (https://github.com/mailru/FileAPI/issues/202) does not officially support CommonJS modules. I've tried using browserify-shim but I'm not able to make it work. After requireing fileapi I just get an empty object back. I've created a repo for reproduction here https://github.com/Prinzhorn/browserify-fileapi
Relevant package.json part
{
"dependencies": {
"fileapi": "2.0.15"
},
"devDependencies": {
"browserify": "11.1.0",
"browserify-shim": "3.8.10"
},
"browser": {
"fileapi": "./node_modules/fileapi/dist/FileAPI.html5.js"
},
"browserify-shim": {
"fileapi": "FileAPI"
}
}
If you want to try it locally:
git clone git#github.com:Prinzhorn/browserify-fileapi.git
npm install
npm run build
chromium-browser index.html
Check out the console in Chromium, you'll see an empty array from running console.log(Object.keys(require('fileapi'))). Note that there is a global window.FileAPI with the correct API.
Does anyone know if browserify-shim is able to shim FileAPI? Because I believe it does some exotic things to manage it's dependencies (the concatenated files expect certain globals).
You'll need to tell browserify to use browserify-shim as a transform in the package.json as outlined in this example
Mainly you're missing:
"browserify": {
"transform": [ "browserify-shim" ]
}
I am trying to integrate xdomain.js with browserify :
require('xdomain/dist/0.6/xdomain');
but i get:
Uncaught ReferenceError: xhook is not defined
(anonymous function) xdomain.js:882
(anonymous function) xdomain.js:1067
the only solution is to concat script files or include script in html (which is not acceptable cause component needs to be independent of external dependencies)
is there a way to integrate xdomain.js using standard browserify mechanisms?
It sounds like you might need a browserify-shim configuration so that you can pull in the xhook dependency. e.g. in your package.json:
//...
"browser": {
"xdomain": "xdomain/dist/0.6/xdomain.js",
"xhook": "xdomain/vendor/xhook.js"
},
"browserify-shim": {
"xhook": {
"exports": "xhook"
},
"xdomain": {
"exports": "xdomain",
"depends": ["xhook"]
}
},
"browserify": {
"transform": [ "browserify-shim" ]
},
//...
And of course you'll have to install the browserify-shim package with npm.
I am building a project with broweserify, jquery and jquery-ui. All libs were pulled down with npm. Here is how I am using my browserify-shim to pull in jquery' and 'jquery-ui:
"browserify": {
"transform": [ "browserify-shim" ]
},
"browser": {
"jquery": "./node_modules/jquery/dist/jquery.js",
"jquery-ui": "./node_modules/jquery-ui/jquery-ui.js"
},
"browserify-shim": {
"jquery": "$"
}
Everything works like it should, but I look at jquery-ui.js and the first line of code is
var jQuery = require('jquery');
How is this line of code being resolved? When I put a debuggerstatement after this, jquery is always resolved. I even changed the name of jquery in my shim and the it still resolved. How is that happening?
Short answer: your package.json dependencies
Long answer: I'm also using those npm modules. That jquery-ui package seems to have been retooled to require its internal dependencies. As you note, the first line of the jquery-ui core.js is: var jQuery = require('jquery'); which looks for a module called jquery in the project's npm dependencies. That's handled by something like what I have in my package.json:
"dependencies": {
"jquery": "^2.1.1",
"jquery-ui": "^1.10.5",
}
in addition to the browserify parts:
"browserify": {
"transform": [ "browserify-shim" ]
},
"browser": {
"jquery": "./node_modules/jquery/dist/jquery.min.js",
"jq-ui": "./node_modules/jquery-ui/jquery-ui.js"
},
"browserify-shim": {
"jquery": "$",
"jq-ui": {
"exports": "jq-ui",
"depends": [ "jquery:jQuery" ]
},
}
What I haven't figured out is whether we can use the jQuery UI components in our other client-side scripts.
See also:
* Using Browserify with jquery and non-npm plugins
* Using Browserify with jQuery plugins
If you installed jquery and jquery-ui with npm, then I suspect they're somewhere in the rest of your dependencies. In that case, you're actually not using the "browser" "jquery" property, but instead letting browserify use it's non-shimmed "require" process.
Is "jquery" in your "dependencies" list? What happens if you delete that "browser" "jquery" line entirely?