ReactJs.Net, Gulp, Babel, Browserify MVC
My brain hurts, I have just read loads of different tutorials and they seem to differ (or change quite rapidly) in their ideas of how to make this work.
Background:
I have started learning ReactJs.NET, and I would like to start writing ES2015 and using the Require('SomeComponent') statement to import modules (babel doesn't import/export yet).
I had this working fine for the ES2015 part, by using a BabelBundle that comes with React.NET
bundles.Add(New BabelBundle("~/bundles/main").Include(
"~/Scripts/test.jsx"
))
I wanted to use some extra components for a project (a multiselect), and it seemed the simplest way to get this and use it was to install node + npm, and then use require to import that component.
That led me onto replacing the MVC bundling with gulp, and using a gulpfile to transform/combine my files into a single useable js file (which works better than .NET bundling if I am pre-rendering the first view on the server side anyway).
What I need to do in my gulpfile.js, but I am not 100% sure in which order I need to do it, or how exactly I should describe this in my gulpfile:
require tags) Am I even going down the right path? there seems to be so many options and I am getting quite confused by them all and what seems to be a rapidly changing landscape..
Intro
My brain hurts [...] there seems to be so many options and I am getting quite confused by them all and what seems to be a rapidly changing landscape..
That is called "JavaScript fatigue". It is a common affliction.
Am I even going down the right path?
While all humans must grapple with this existential question, studies show that JavaScript developers are 110% more vexed by it. Food for thought if you decide to continue down this path.
Require('SomeComponent')
require() (lower case).
babel doesn't import/export yet
With the appropriate plugin / preset Babel does compile ES2015 module syntax ( import|export ) to various ES5 module systems, including Node's require() . However, you may be better of just using the Node module system for now.
Parse with browserify for ( require tags)
require() calls -- it's a function, not a tag.
How to
You don't necessarily need gulp at all for this. Here's a basic example of how to get off the ground with this with Browserify:
var babelify = require("babelify");
var browserify = require("browserify");
var fs = require("fs");
function bundle () {
return browserify("./entry-module", {
// Enable source maps for development
debug: process.env.NODE_ENV !== "production",
})
.transform(babelify, {
presets: ["es2015", "react"]
})
.bundle()
.pipe(fs.createWriteStream("./bundle.js", "utf8"));
}
This will run Babel (via Babelify), and configure it to process ES2015 syntax and JSX. You could put the Babel configuration in a .babelrc file instead and just have transform(babelify) .
Browserify transforms are run before parsing for require() calls. So by the time Browserify needs to analyze the code it'll be ES5.
By default your JSX containing files can be .js or .jsx .
FWIW the es2015 preset will compile import|export to Node modules.
If you want to integrate with gulp, then you can do something like:
gulp.task("bundle", bundle);
Conclusion
Am I even going down the right path?
There are many paths. But using Babel is part of the path many successfully take. So is using Browserify (but, for example, some prefer Webpack). If you start with something like what I've illustrated it should get you off the ground and it should seem much more approachable at that point.
You could also check out my miniminirepro/babelify repo. It's meant as a template for people to create minimal reproductions of bugs, but it serves as a hello world level example of how to bundle with Browserify and transform with Babel.
链接地址: http://www.djcxy.com/p/32982.html