I'm using Browserify programmatically, through node, like so:
var options = {
debug: true,
cache: {},
packageCache: {},
fullPaths: true,
noParse: []
};
var b = browserify( 'index.js', options );
b.on('data', customFunction);
b.bundle();
My customFunction doesn't modify the data anyhow, just reads it.
It runs a regex on the first line, to detect the file name of the code that comes on the following lines.
The thing is, when i set options.debug to false, to get rid of the sourcemaps, the customFunction behaves in a very different way (the regex doesn't get half the file names) and i can't seem to figure out the pattern for that difference. I assume that turning debug to false, does more than turning off the sourcemaps.
I just want to turn off the sourcemaps on browserify, with no other side-effects, is this possible?
You could try to extract the source maps with a separate tool like exorcist https://github.com/thlorenz/exorcist
Related
I'm trying to optimize my javascript project with r.js optimizer from requirejs. I use both amd and non-amd modules in my project. There will be two environments, one with requirejs environment and the other with no requirejs environment.The files at the non-requirejs environment should not have on require or define calls. While combining amd-modules into bundles using r.js it is fine to have a define call with bundle name at the end of the file. But for the non-requirejs environment after the files have been optimized, they are also getting a define insertion at the end of the file with the module name.
Let's take I have four files A and B which are AMD-modules and C and D are non-AMD modules.
my build.js is like this
({
appDir: "../",
baseUrl: "./",
dir : "../../../output",
paths: {
A : '../somepath/to/A',
B : '../somepath/to/B'
},
modules : [
{
name : 'bundle1',
create : true,
include : ['A', 'B']
},
{
name : 'bundle2',
create : true,
include : ['C', 'D']
}
],
// removeCombined : true,
cjsTranslate: false,
optimizeCss : "none",
skipModuleInsertion: true,
optimize: "uglify",
fileExclusionRegExp: /^(((r|app.build)\.js)|(v0))$/,
keepBuildDir: false,
bundlesConfigOutFile: "bundles.js",
onModuleBundleComplete : function(data) {
console.log(data)
}
})
This is the bundles amd-file looks like.
define('A', function(){
//some stuff of A
});
define('B', function(){
//some stuff of B
});
define('bundle1',function(){});
The bundled non-amd file looks like
//some stuff of C
});
//some stuff of D
define('bundle2',function(){});
How to resolve this situation. I have gone through the optimization docs and example.build.js. still couldn't figure out the way. Am I missing something ? Is there a way to exclude that define call at the end of the non-amd-modules. If yes, How ?
I see you have used skipModuleInsertion option which based on the documentation should have helped you. I am not sure why it didn't.
Another option you can use is after the build is complete before writing to file, you can remove that particular define call using onBuildWrite
So I want to do a very simple task using webpack.
I have a few static HTML templates like e.g.
test.html
<div><span>template content</span></div>
and all I want to do is return the string inside the template
e.g
require("raw!./test.html")
with should return a string like:
"<div><span>template content</span></div>"
but instead, it returns the following string
"modules.exports = <div><span>template content</span></div>"
I have tried several modules, like the raw-loader and html-loader.
and they both behave the same way.So I took a look at the source code, just to find out that its SUPPOSED to behave this way.
so what exactly am I expected to do with this, if I just want the raw
HTML? is it a bad practice just to remove the prepended
"module.exports =" string? from the bundle
edit: removing the 'modules.export =' part results in the bundle returning nothing :/
my config
module.exports =
{
module:
{
loaders:
[
{ test: /\.html$/, loader: "raw-loader" }
]
}
};
The solution is to require your file without specifying any additional loader, as this is already specified in the webpack config
const test = require('./test.html')
Explanation: With your current code, you are applying the raw loader twice to your file. When you specify a loader chain in your configuration:
loaders:
[
{ test: /\.html$/, loader: "raw-loader" }
]
... you are already telling webpack to add this loader to the loader chain every time you require a file matching the test condition (here, every html file)
Therefore, when you write this
const test = require('raw!./test.html')
... it is actually equivalent to this
const test = require('raw!raw!./test.html')
I finally figured it out I think. You need to resolve the path name using require.resolve(./test.html) https://nodejs.org/dist/latest-v7.x/docs/api/globals.html#globals_require
When you write require('./test.html') it means that you simply run the code returned by the loaders chain. The result is exported in this code as module.exports. To use this result you need to assign your require statement to variable:
var htmlString = require('raw!./test.html');
//htmlString === "<div><span>template content</span></div>"
Remember that any loader in Webpack returns JS code - not HTML, not CSS. You can use this code to get HTML, CSS and whatever.
I'm trying to define a global object that i can reference across all of my modules. however, in the modules, i am unable to reference my path, and it's saying that "g" does not exist.
In main1.js, i have this:
requirejs.config({
paths: {
Underscore: 'lib/underscore/1.3.3/underscore.min',
Backbone: 'lib/backbone/0.9.2/backbone.min',
Globals: 'lib/backbone/ globalVars'
}
});
require([ 'views/pages', 'views/filters'], function(allPages, filters) {
filters.render();
allPages.render();
});
inside globalVars.js, i have this:
(function() {
var Globals = {
isDemo: false
}
console.log('in globalvars') // this shows in my console
}).call(this);
and finally, inside of view/pages.js, i have this:
define([
'Globals',
'Underscore',
'Backbone'
], function(g, _, Backbone){
console.log(g.isDemo) //<-- returns "TypeError: g is undefined"
If i use a define inside my main1.js like this:
define( 'Globals', function() {
return {
isDemo: true
}
})
it works just fine. I haven't had much luck with trying to figure out why this is not working. I'd like to be able to just include a path to the globalVars rather than boilerplate pasting a define block in each and every module that needs it, since changing isDemo to false would require updating many other module pages (main2.js, main3.js, etc) as well. thanks!
Well, to start with, your globalVars.js is not in the module pattern, so requirejs doesn't know what you're trying to register as the module. If you change that file to use the pattern, like the define you added to main1.js, you should be all set. Is there a reason you aren't defining it as a module?
var ddoc = {
_id: '_design/app',
language: 'javascript',
views: {},
lists: {},
shows: {},
lib: {/* see below */}
};
I can't find good documentation about what to put into ddoc.lib, eg:
Can I put functions: ddoc.lib.myHelper = function () {}; ?
Can I reference JavaScript files (CommonJS module?): ddoc.lib.math = 'math.js';
In case of 2. where to store math.js?
As far as I know the best solution for today is to use couchapp. It can create a sceleton that could be edited easily.
The best couchapp manager I have seen is http://kan.so/ I would just use this, but ...
To roughly answer your questions.
yes you can put functions in lib, but they must be turned into escaped strings. You want to just put them in like you would a file though not an anonymous function.
yes you can require just structure as
"lib": {
"math.js":"escaped source"
}
i've tried to get SWFObject register a static flash object, but i wont show it. I know visibility is set to hidden, and that is why, but why does it do that?!
http://manual.businesstool.dk/test.html
Your example uses JavaScript to embed the SWF, it isn't using SWFObject's static approach, so it appears your question is no longer valid.
BTW, you can simplify your code by eliminating the redundant hasFlashPlayerVersion check and by using SWFObject's callback function.
Current:
if (swfobject.hasFlashPlayerVersion("6.0.0")) {
var fn = function() {
swfobject.embedSWF("http://manual.businesstool.dk/gfx/flash/oprettelse-af-kunde.swf", "myReplace", "560px", "340px", "9.0.0");
var obj = swfobject.getObjectById("myReplace");
swffit.fit("myReplace");
console.log(obj);
};
swfobject.addLoadEvent(fn);
}
.
Simplified:
var mycallback = function (e){
swffit.fit(e.ref);
};
swfobject.embedSWF("http://manual.businesstool.dk/gfx/flash/oprettelse-af-kunde.swf", "myReplace", "560px", "340px", "6.0.0", false, false, false, false, mycallback);
.
SWFObject's swfobject.embedSWF method includes a domready check, so you don't need to use addLoadEvent. It also includes a check for a specified version of Flash Player, so you don't need to wrap your code in the swfobject.hasFlashPlayerVersion block.