I admit, there's part of me that wants the world forever to be
<script src="mystuff.js"></script>
(and of course, the need for it to have a separate closing tag seems odd anyway ;-)
The save, reload loop is such a nice, tight way of coding, and so easy to understand! But it's limiting - new web technologies have a build step, and that's just the way life will be for all but the most trivial vanilla.s project.
My coworker Eric Wyler found the next best thing - webpack is famously fiddly (for a laugh, just see what @IAmDevloper says about it) but he got some great results with Parcel.
Here's his Parcel bootstrap steps:
(This assumes you've installed npm already)
Pick a project name, we'll go with "fooproj" for now.
mkdir fooproj
cd fooproj
npm init -y
npm install -g parcel
(this install parcel globally, so you just have to run it once for your first project)
Now use an editor or the command line to do the basic
cat > index.html
<html lang="en">
<head>
<title>Parcel React Example</title>
</head>
<body>
<div id="root"></div>
<script src="./index.js"></script>
</body>
</html>
and
cat > index.js
import React from 'react';
import ReactDOM from 'react-dom';
const App = () => (
<h1>Hello world</h1>
);
ReactDOM.render(<App />, document.getElementById('root'));
// Hot Module Replacement
if (module.hot) {
module.hot.accept();
}
so after that:
npm install --save react react-dom
parcel index.html
BOOM! Like the console says, you now have a little webserver running at http://localhost:1234 - and if you make a change to index.js, and save, it automagically reloads (actually, technically it's not even reloading... in theory if you're doing something with state it might get a little munged, but for many changes it's super-instant.)
Now it looks like dist/ is already full of something ready to deploy, but for some reason it was assuming an absolute path, but a command like
parcel build index.html --public-url .
did what I wanted, and I could just plop the contents of dist/ into an arbitrary folder on my webserver.
No comments:
Post a Comment