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"
]
}
}
Related
Suppose we have these internal/private NPM packages:
config
student-ui -- package includes some UI components related to students
course-ui -- package includes some UI components related to courses / classes
student-ui / package.json
{
"dependencies": {
"course-ui": "^1.0.0"
},
"peerDependencies": {
"config": "^1.0.0"
}
}
course-ui / package.json
{
"dependencies": {
"student-ui": "^1.0.0"
},
"peerDependencies": {
"config": "^1.0.0"
}
}
So the dependency tree looks like this:
student-ui <--> course-ui
| |
|--> config <--|
"Why does course-ui need a reference to student-ui?"
Suppose that when you view a course you can also view a list of students, so you need to use the StudentApi to make some API call, then display the list in a StudentList component -- all things owned by student-ui.
Supposed we do a major upgrade to config so now it's at 2.0.0. When we go to install the new version in student-ui, we can't because the peer dependency for course-ui requires version 1.x.
So, we need to update course-ui first -- but the same issue occurs, since it references student-ui.
We can fix this by adding overrides to student-ui / package.json just so we can build the package, so now the JSON looks like:
{
"dependencies": {
"course-ui": "^1.0.0"
},
"peerDependencies": {
"config": "^1.0.0"
},
"overrides": {
"course-ui": {
"config": "#config"
}
}
}
This should allow student-ui to publish a new package, and then we can update config and student-ui within course-ui, and remove the overrides.
But, there's got to be a better way, right?
I am trying to create a custom cra-template file for my team to use, but keep hitting an issue where I receive the following error when running npx create-react-app test-app --template my-custom-template.
internal/modules/cjs/loader.js:796
throw err;
^
Error: Cannot find module 'cra-template-my-custom-template'
Require stack:
- C:\Users\user\Desktop\cra-test-app\test-app\node_modules\react-scripts\scripts\init.js
- C:\Users\user\Desktop\cra-test-app\test-app\[eval]
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:793:17)
at Function.resolve (internal/modules/cjs/helpers.js:80:19)
at module.exports (C:\Users\user\Desktop\cra-test-app\test-app\node_modules\react-scripts\scripts\init.js:110:13)
at [eval]:3:14
at Script.runInThisContext (vm.js:116:20)
at Object.runInThisContext (vm.js:306:38)
at Object.<anonymous> ([eval]-wrapper:9:26)
at Module._compile (internal/modules/cjs/loader.js:955:30)
at evalScript (internal/process/execution.js:80:25)
at internal/main/eval_string.js:23:3 {
code: 'MODULE_NOT_FOUND',
requireStack: [
'C:\\Users\\user\\Desktop\\cra-test-app\\test-app\\node_modules\\react-scripts\\scripts\\init.js',
'C:\\Users\\user\\Desktop\\cra-test-app\\test-app\\[eval]'
]
}
The template itself is fairly simple at the moment and I think the issue here may be that our team uses a private feed for some internal packages (which are dependencies in the template). This private feed is set to use npm as an upstream feed.
I have tried testing the template locally with the --template file:../path/to/template method and publishing the template to our internal feed. I can install the package using npm install, so the package is definitely being found in the registry.
I have also tried refreshing the npm cache and uninstalling create-react-app per some other recommendations.
Do I have to publish the template to the public npm registry for this to work? Or am I missing something else?
My template's package.json file is as follows:
{
"name": "cra-template-my-custom-template",
"version": "1.0.5",
"keywords": [
"react",
"create-react-app",
"template",
"typescript"
],
"description": "The base template for React apps hosted within our project",
"files": [
"template",
"template.json"
]
}
and the template.json is as follows:
{
"package": {
"dependencies": {
"#<custom-feed-scope>/<custom-feed-library>": "^5.11.0",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"#types/jest": "^24.9.1",
"#types/node": "^12.12.34",
"#types/react": "^16.9.32",
"#types/react-dom": "^16.9.6",
"<custom-feed-library>": "^3.2.1",
"<custom-feed-library>": "^0.2.4",
"typescript": "^3.7.5"
}
}
}
I am currently using npm instead of yarn, but I was able to create an app using the typescript template just fine.
After some research into other cra-template packages, it seems the missing piece here was not having the main value defined in my template's package.json file.
After changing the package.json to what is below, it started working.
{
"name": "cra-template-my-custom-template",
"version": "1.0.8",
"keywords": [
"react",
"create-react-app",
"template",
"typescript"
],
"main": "template.json",
"description": "The base template for React apps hosted within our project",
"files": [
"template",
"template.json"
]
}
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
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 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?