I have some JavaScript code that is compiled to commonJS modules from arbitrary compile-to-JS languages and I would like to debug the browserified code using sourcemaps.
So my files have a //# sourceMappingURL=index.js.map already and I'd expect browserify to read that and transform them so I can debug with my original non-JS language.
Do I need another transform for this?
I tried it with browserify's debug flag, and then it does generate a sourcemap but it is for the intermediate JS files, and NOT the original non-JS files. I even see the original //# sourceMappingURL statements lingering in the bundle, and my browsers debugger doesn't like it a all.
Is this possible at all?
I see this: Keep original typescript source maps after using browserify But it doesn't work.
You can run Sorcery on the output of broswerify. Sorcery will resolve a chain of sourcemaps until it gets to the original files. Sorcery emits a new sourcemap that has the original sources. This is not tied to any specific tool so it will work with webpack.
Installation: npm install -g sorcery
Usage: sorcery -i outputOfBrowserify.js
That command will overwrite the file and its source map in place.
Related
I have web pack application and want to build output multiple files not a single javascript file. for example if I have such folder structure
components
1.js
2.js
actions
1.js.
2.js
my webpack build have to compile files in same folder structure. How i can achieve that?
I tried babel cli:
babel ./src --out-dir ./lib --source-maps --presets es2015,react --plugins babel-plugin-add-module-exports,babel-plugin-transform-decorators-legacy,babel-plugin-transform-class-properties --watch
It outputs files as I wanted but getting error
Cannot resolve module
Because it does not know anything about webpack resolve.
Any suggestions?
Getting webpack to output multiple files is possible but it does have limitations. First it's important to understand how this works. Webpack actually provides a runtime script that can load code "chunks" as they are needed, this is important for large applications so the user doesn't have to download the javascript for the entire app just to see the homepage. But webpack needs to keep track of these chunks and what they're named at build time to be able to load them correctly at run time. For that reason it has it's own file naming conventions to enable this functionality. See more here: https://webpack.js.org/guides/code-splitting/. So you can require.ensure all of your deps, but they won't be named and foldered they way you describe as webpack's runtime wouldn't be able to find them in that case.
The other thing that's important to consider is that webpack is a bundler, so it's meant to bundle files. Essentially your saying you don't want to bundle your files. So if that's the case, you should probably look into using require.js. Many people have moved from require to bundlers such as Wepback and Browserify as typically it's not efficient to download every little module seperately. But, every app is different so you may in fact have a good reason to not bundle.
If you do in fact want to do some bundling but want to optimize how it's done, then I can help with that as well, and webpack is certainly a great tool for that. But I'll need to understand your use case a little more to give the best advice.
The title seems confusing but I'll give an example.
Let's say I create a module that uses ES6 that runs in the browser, so I use browserify with babelify to build everything.
Now I want to include that same module in a project that uses browserify, but does not uses Babel to compile ES6, so I need the compiled version.
I tried to require the "browserified" module like this:
// es5-project.js
require('./compiled-module-with-browserify');
But when I run browserify es5-project.js I start to get some errors like this:
Error: Cannot find module './XXX' from '/Users/mauricio.oliveira/projects/project-name/dist-folder'
And that makes sense, since browserify compiled all modules into one file, it won't find the modules inside the compiled file.
Does anyone have faced a problem like this one? if you did, how you solved it?
Thanks!
Found the answer!
This will do the trick https://github.com/substack/browserify-handbook#browser-field
Just define a "browser" index in the package.json file, and point to the initial source file.
:)
I developed a javascript web app with npm and webpack. Now I converted all those .js files to .ts by using the powershell command stated here. The succeeding actions in the link is using grunt; I want to directly use VS2015 Typescript project but I cannot find any reference on the net about what to do with the node_modules and how I can fully convert all my package.json and webpack into Typescript project. The Task Runner Explorer in VS2015 only supports Grunt and Gulp tasks.
I recommend going with the "bare-foot" solution first. I'd rely much less on VS2015. It's maybe the best IDE available, but JS and TS projects can be handled from command line without relying on the magic of the IDE. This way you can gain a deeper understanding of these technologies and I think now it would be easier too.
I recommend the following steps:
create a tsconfig.json in the root folder. Read around, there's plenty of info available. Just one hint: use 'filesGlob' to specify the files to compile.
use TSD to get the .d.ts files of the libs you use from DefinitelyTyped. You might create, or at least just declare, the missing packages.
run 'tsc --project .' from command line to compile everything. You'll see the errors that are to be solved.
I'm typing from mobile, I can edit the codes tomorrow. Have any comments?
Well, we have been using Browserify 2.x for some time now. We are going through some refactoring so we want to try update to latest Browserify to diminish future leaps in versions.
Unfortunately something has changed in how external bundles are handled. In the old version we could simply tell Browserify which modules to keep out of the bundle and require them from another one - basically what is described here.
From the version 5.0.0 some big change in Browserify internals happened. Let's take for example this command. The debug module is NPM module.
browserify -r debug -o vendor.js
Running this command in Browserify#4, the output file would look like this:
require=(function... {
"debug":[function(require,module,exports){
module.exports=require('2Bvkwp');
},{}],
"2Bvkwp":[function(require,module,exports){
// actual code from debug module
},{}]
});
Now with the Browserify#5 it looks like this:
require=(function... {
1:[function(require,module,exports){
// actual code from debug module
},{}]
});
To complete the equation, I have simple file that contains require('debug') and this is bundled with command browserify -x debug -e index.js -o main.js. Internal dependency is set to undefined for the debug module, which is alright.
If you would look at the prelude.js file, there is logic that simply uses previously defined global require (stored in previousRequire variable) to find modules that are not defined within current bundle. BUT since vendor.js doesn't expose anything like debug module, it cannot succeed.
All I have been able to find is this line in the changelog:
hashing is gone so expose: true or explicit expose id is required for doing multi-export bundles
I am unable to find what does that actually means :(
You should able to create your vendor bundle like this:
browserify -r debug > vendor.js
And then create your application bundle like this:
browserify index.js -x debug > main.js
This works just fine (I'm using browserify#6.1.0).
Basically, even if require('debug'); won't work in the browser console, browserify can find the debug module in the vendor bundle as long as the bundles are loaded in the right order, i.e:
<script src="vendor.js"></script>
<script src="main.js"></script>
It doesn't have to expose the dependency to external code, only to other browserify bundles.
I'm using UglifyJS2 to compress an output file from Browserify. Browserify has generated its own source map which it tacks the bottom of the file like so:
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjo...
I've got an error my JS somewhere in one of the files I've require'd, but Chrome is telling me the error occurred somewhere in the browserify output file rather than pointing me all the way back to require'd file.
The in-source-map option doesn't say anything about base64-encodings, so I haven't set it to anything.
i think sourcemap with uglified js has not support yet.
our team deploy minified source and debug it by Chalres's Map Local or Fiddler's autoresponder with not minified source with sourcemap.