my module is like,
define(["angular","underscore","jquery","some/other/custom/module",
"css!dropzone-css/dropzone.css"]
Using grunt task grunt-requirejs, How do I even specify css in requirejs.compile.options.paths?
Is there an other way ?
I can't modify define of the original module. That's external.
Thanks.
Related
In my opinion, webpack-loader has the same function as babel-plugin！！
So can you help me answer the difference between the two, isn't it all through the AST to manipulate the code?
Babel: will turn your ES6+ code into ES5 friendly code, so you can start using it right now without waiting for browser support;
Webpack: A bundler for javascript and friends Packs many modules into a few bundled assets. Code Splitting allows to load parts for the application on demand. Through "loaders" modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, ..., and your custom stuff.
Simply put, Webpack is a tool for putting your code through the processing pipeline and bundling it together into a single JavaScript file.
Babel can be classified as a tool in the "JavaScript Compilers" category, while Webpack is grouped under "JS Build Tools / JS Task Runners"
For More clarification see this answer Webpack loaders vs plugins; what's the difference?
Also check out this Medium post Webpack explained simply
I have a global node module that uses babel-core transform function.
I have no .babelrc at the root of my module.
It takes a file and basically just use transform to 'compile' it.
const result = transformSync(content, {
filename: src,
});
There is a .babelrc file along with the said file and I'm indeed able to find it
{
"presets": ["#babel/preset-env"]
}
but it complains about not finding '#babel/preset-env' which is right, because the module is installed with mine and not the file/.babelrc being transpiled.
I've tried many options in https://babeljs.io/docs/en/options but still can't make it work.
How can I configure transform so it get plugins from my module while loading babel configuration from the folder of the transpiled file ?
By design, Babel's plugin loader searches for plugins relative to the config file that references them, or uses the cwd for plugins passed directly in the transformSync options. Control of that isn't exposed to utilities calling Babel.
Changing those sematics would mean that a Babel config file would vary in behavior based on the tool that was loading it, which would be very inconsistent for users, especiall considering that one of the main benefits of having the config file format is so that config can easy be shared across multiple tools calling Babel, for instance one for tests and one for bundling.
If you want users to be able to customize your tool, it sounds like what you may actually want is your own entirely separate config file for your tool, so you can define whatever semantics you want for that.
We have a multiple file/module based application. We are using r.js with uglify2 to optimize the build. It current does whitespace removal and minification which is great.
Requirement - Can we somehow obfuscate function names used in a file such that other RequireJS modules which are including this custom file do not break and continue to use the "obfuscated" function names?
Many thanks!
Backstory:
I've currently got a Require.js and jQuery/Backbone.js using site. Until now, jQuery and Backbone have stayed outside of Require, letting me do:
define([], function() {
// NOTE: Using Backbone and $ without an import!
new Backbone.View(el: $('#foo');
});
That's worked really well: without that approach, just about every module in my site would have to add a Backbone/jQuery dependency.
But then the other day I needed to package up a portion of our code as an external library. I made a separate require config file for it, and everything seemed great, until I compiled ("optimized") all the files in to a single library file, and realized that Backbone/jQuery (and related plug-ins/libraries) weren't getting included.
So, I added a bunch of shims, and got Backbone, jQuery, and all the related libraries in to Require. However, I still have a ton of modules that expect $ and Backbone to just exist. That should be ok, because Backbone/jQuery both register their variables globally, but it's not because of Require's load order.
Basically, any module without dependencies is broken, because they load before Require loads the jQuery/Backbone shim. Any modules that have dependencies don't have this issue, because jQuery/Backbone have already been loaded by the time they get loaded.
It seems like my only option is to add an explicit Backbone/jQuery to every module without dependencies. I've got a bunch of modules like that though, and ideally I'd prefer not to have to import jQuery/Backbone anywhere.
Question
So, my question is: is there any way to tell Require "load these X modules/shims before you load everything else"? Or, to put it another way, is there any way to tell Require that all of my modules depend on certain other modules?
I thought putting Backbone at the top of my initial require:
require(['backbone', ...
but that didn't help; the other dependency-less modules still load before it.
I see no reason this would not work:
require(['backbone', 'jquery'], function () {
require(['main']);
});
The idea is to wrap what was your initial entry point to your application in a require call that loads Backbone and jQuery. If the modules of your application are loaded only because main is required (that is, if there is no require call elsewhere that loads any module needed by main), then with the code above both Backbone and jQuery are guaranteed to be loaded before any of the modules used by main are.
I am trying to optimize a project with r.js and am confused about how to exclude a certain folder from the copy step. My structure is...
/index.htm
/scripts/main.js
/scripts/require.js
/scripts/libs/jquery/jquery.js
/scripts/libs/other/ /* I want NONE of this folder to be moved to the build */
Is it possible to do this?
In your build config you can exclude files and folders using the fileExclusionRegExp property.
So for you example you would have:
fileExclusionRegExp: /^other$/
This will exclude any folders or files called other.
Yes, the documentation provides you with several ways of doing this:
for a start only the dependencies listed in main.js's require and their own dependencies will be included.
Assuming that what you have in /other/ is a dependency but you still don't want them in, you can use shallow exceptions, or define them in the require.js config paths and use the empty: scheme.