This course has been updated! We now recommend you take the AWS for Front-End Engineers (ft. S3, Cloudfront & Route 53) course.
Transcript from the "Browserify Code Demo" Lesson
[00:00:00]
>> [MUSIC]
[00:00:04]
>> Kevin Whinnery: All right, so at this point I'll just poke out a couple bits to show you some features of these platforms. So I'll go into the to do MVC repository and just write some changes that I'm gonna immediately throw away just to demonstrate some of the features that you can bring to bear.
[00:00:28] So for Browserify, I mentioned there's a lot of different transforms that you can use. And in fact, if you Google Browserify transforms, even if you misspell it, you're probably gonna get it. You'll see this list of at least a few popular transformations. So we'll just kind of pick one out.
[00:00:53] I thought I was gonna do, there's a markdown one which is kind of neat. Which allows you to essentially require a markdown file as a string in your JavaScript application. So just temporarily, I'm going to install this without saving it because I'm not including the dash dash save, I'm gonna install the module locally.
[00:01:17] But it's not gonna be added to my package.json, so none of you will get it if you were to clone the repository right away. And this is going to add a new transformation capability to our Browserify code. And you'll notice that the configuration isn't terribly well documented here.
[00:01:45] But if I go into, as James pointed out, my grunt.file, I can see these are my Browserify options where I can pass in different bits like whether or not I want to generate a source map. And then I will specify a source file or multiple source files and a destination file for my bundle.
[00:02:09] This is kind of the core arguments you would pass in if you were executing a Browserify from the command line. But where the transformations were declared is here in the package.json. So here in the transform section I specify browserify-shim is one of them. I also specify babelify. And now I'm also going to drop in browserify-markdown as one of the transforms.
[00:02:44] So if I fire up my-
>> Speaker 2: What does browserfy-markdown do?
>> Kevin Whinnery: It allows you in your JavaScript code to require a markdown file and have that available in your JavaScript code as a string. Not terribly useful [LAUGH] all the time. But just to kinda show you a feature that you can add to your transformation, I figured we would take a look at this one.
[00:03:12] So now I have this transformation added to my configuration in my browser code. Let's go into app.js say. And the feature that this transformation allows me to do is rather than just requiring JavaScript files. I can require markdown files which will be converted to a string. It'll actually also be parsed into HTML, if memory serves.
[00:03:42] So just for demonstration purposes, I'm gonna require the readme for the project.
>> Kevin Whinnery: And that's going to be up one directory. Let's see if I can get the resolve right. So we had source. I think it's one more. And then, README.md. And when the application initializes, I'm just gonna go ahead and console.log the contents of the readme file.
[00:04:25]
>> Kevin Whinnery: So I'll start up my server.
>> Kevin Whinnery: todomvc js/app.jsmust be obj. Let's see, what did I mess up? js/app jsmust be object.
>> Kevin Whinnery: Source browser.
>> Kevin Whinnery: Must be object. Okey dokey. So my markdown transform doesn't seem to be working cuz it's blowing up on this line. It could be that I didn't do this correctly.
[00:05:24] So up one directory would be,
>> Kevin Whinnery: Browser and then up another directory would be source.
>> Kevin Whinnery: And then up, yeah, I know that's the,
>> Kevin Whinnery: That is the proper path. Well, this is less impressive than I had hoped.
>> Kevin Whinnery: All right, I'll keep trucking for now but the the way that typically you would do this like the running it through grunt, you don't get the full output of Browserify.
[00:06:02] So you could run the Browserify command line utility to get a more detailed SEC trace of why this isn't going. But I won't waste your time with that right now. So I'll go ahead and take this out. But the idea there is that these additional transforms essentially give your code new capabilities that it didn't have before.
[00:06:28] So I'll get that running, hopefully, while you guys are at the break and figure out, or while you guys are working on the exercises, figure out what went wrong there.