Although technically you can run Preact without any tools or pre-compiling, we’ll get a much better development experience by using modern versions of Javascript along with JSX. To achieve this, we'll be installing babel-core
along with babel-preset-env
. This combination will provide us with a set of plugins suitable for transpiling our code for use in modern browsers. It doesn't include support for JSX however, so we'll add the babel-plugin-transform-react-jsx
plugin to handle that part. Along with creating a Javascript file that can be executed in the browser, we also want to preview our work each time we change a file - so we install Webpack and the Webpack Dev Server to handle both of those tasks. The final dependency we install is babel-loader
which will allow the source files being accessed by Webpack to first be processed by Babel and the plugins we specified.