I have a RequireJS project I am working on with the following structure:
Project/
index.html
src/
main.js
projectcomponent.js
lib/
require.js
main.js is the entry point of the Require application and has the following require.config inside it:
require.config
baseUrl: "./"
main.js returns an object.
I want to use this entire project as a module inside another RequireJS project. I attempted to use r.js (the RequireJS optimisation tool) to reduce the project to a single file, which worked - but as it relied on RequireJS, its config conflicted with the config of the parent project I wanted to use this project as a module for.
How can I use one RequireJS project as a module inside another RequireJS project?
You can get round this by using almond (https://github.com/jrburke/almond) to replace the require.js dependency, making the first project a fully encapsulated single file.
There's some further explanation and relevant links on the RequireJS site: http://requirejs.org/docs/faq-optimization.html#wrap
Related
I'm new into webpack, and I'm having an issue trying to resolve a subdependency.
I'm importing a dependency that is trying to require a module from a specific folder (not the node_modules) (let's call it subdependency). That folder contains two files:
subdependency/package.json
subdependency/build/Release/addon.node
subdependency/lib/src/index.js (this index.js requires the addon.node)
I'm using webpack, and when importing my dependency it was not able to find subdependency.
The subdependency is there but it was not accessible. I added a loader for loading .node files https://www.npmjs.com/package/native-ext-loader and it was still not working; trying to identify what was happening I modified in my build the require path from ./subdependency to ./subdependency/build/Release/addon.node and the file was accessible (so I guess the native ext loader is working fine, but it's not loading other files like the index.js).
I think the problem is that webpack is not able to understand that ./subpdendency is a module, or that I'm not loading it correctly.
Any suggestion or idea is welcome!
I resolved the issue by forking the dependency and switching from node-pre-gyp to prebuildify, since node-pre-gyp doesn't works fine with webpack.
I'm in the process of refactoring a couple of front-end JS snippets I regularly reuse as CommonJS modules. For my own purposes I'll use them with webpack or browserify and so a single JS file that looks like the following would suffice:
var Dependency = require('dependency');
function MyModule() {
// blah blah blah
}
module.exports = MyModule;
As long as I've got a package.json in the repo with the required dependencies I'll be able to include this module in future projects via npm/yarn webpack/browserify or whatever my toolset is on that given day.
But what if I want the module to be available as a standalone that can be added via a <script> tag?
Should I have 'dist' and 'src' directories in the repo, with the 'dist' directory containing the module code above, alongside an app.js that just says window.MyModule = require('./mymodule.js'); and the 'dist' directory containing the webpacked output for use with a script tag?
Should my bundled dist file contain the source of the dependencies or should I note in the readme, that the <script> tag for my module should be preceded by <script> tags for it's dependencies?
Instead of a 'dist' directory, should I have an (other) mymodule.js in the repo root alongside an index.html that includes it via a <script> tag and demos it's features?
Perhaps I'm over thinking this but I've encountered a number of different strategies in other people's repos, and I'm just wondering if there's any sort of consensus or best practice around this.
Having two different projects, a framework and an app which uses this framework, I would like to use requirejs optimizer to minify both together.
Files:
/framework/
js/
some.js
other.js
framework.js
/app/
js/
main.js
module.js
I want to create an app.min.js with requirejs optimizer which includes the framework files, and the app files, in the right order.
However, I want the framework to be able to minify itself, so define() and require() calls in the framework are relative to the framework.js file.
The problem is that if I try to optimize my app, it won't find the framework files because the relative paths used in the framework (like define(['./some'], ...)) won't work if I optimize from my app.
How can I do this properly ?
There might be a better way, but you can represent paths as variables
e.g. relative paths in framework can be 'framework/some' and config can define 'framework/' to be '.' in the framework app. and define 'framework/' to be '../framework' in the app's config.
I have single-page web application that uses RequireJS to organize and structure JavaScript code. Inside the app, I have some JS files that I want to optimize using r.js because they belong to an API that will be consumed by my customers. So, I just want to optimize those files and keep the rest of the code as it is now.
This is my application structure:
app
main.js
many other files and folders
scripts
myAPI
app.js
many other files and folders
require.js
jquery.js
build.js
index.htm
All the JavaScript code is located under the app and scripts folders. As I mentioned before, all those files are defined as RequireJS modules. This is how the main.js looks now:
require.config({
baseUrl: 'scripts',
paths: {
base: 'myAPI/base',
proxy: 'myAPI/proxyObject',
localization: 'myAPI/localization',
app: '../app',
}
});
require(['myAPI/app'],
function (app) {
//app.init....
}
);
As you can see, in the paths configuration I'm defining some aliases that point to myAPI (the folder I want to optimize).
This is how I reference RequireJS from the index.htm file:
<script data-main="app/main" src="scripts/require.js"></script>
This is the build file I created for r.js (scripts/build.js):
({
baseUrl: '.',
out: 'build/myAPI.js',
name: 'myAPI/app',
include: ['some modules'],
excludeShallow: ['some modules defined in the app folder'],
mainConfigFile: '../app/main.js',
optimize: 'uglify2',
optimizeCss: 'none'
})
The optimized file is generated, but I have some challenges trying to use it:
How do I reference that file from the app?
The dependencies to myAPI modules are broken now. RequireJS doesn't find the modules defined in myAPI.
What can I do to keep the aliases defined in require.config.paths working?
Could you please help me with some suggestions or feedback for this situation?
Thanks!!
After doing research, I could solve my problem. I based my solution in this Github project created by James Burke: https://github.com/requirejs/example-libglobal.
First, I had to remove all the dependencies to myAPI individual modules, and create an object that centralizes the access to any internal dependency. Then, I created a r.js script to generate a single file for myAPI. That file is the one that will consumed by the other JS files. That single file can be referenced as a global object or as an AMD module, as James Burke shows in the Github project.
The aliases defined in require.config.paths were no longer necessary.
I'm wondering if it's possible to configure the RequireJS optimizer to fit with our current project structure.
The site directory is structured as below...
root
project1
scripts
main.js
main.min.js
project2
scripts
main.js
main.min.js
project3
scripts
main.js
main.min.js
I was wondering if it's possible to have a "main" file sitting at the root level that will optimize all the child project main.js files and place them within their respective directories. I noticed the multi-page optimizer example on the Requirejs homepage but i'm unsure how to configure that to work for my use case.
Is it just one main.js file per project? I think when I used require js modules, it optimized with this behavior, but in a separate build/distribution directory
see
http://www.bennadel.com/blog/2404-Compiling-Optimizing-A-Subset-Of-A-RequireJS-Application.htm