Installation and Setup
Installing Turbopack
To start using Turbopack, you need to install it via npm. Ensure you have Node.js and npm installed on your machine. If not, download and install them from the official Node.js website.
Initialize a new project: Open your terminal and create a new directory for your project. Navigate into the directory and run the following command to initialize a new Node.js project:
bash mkdir my-turbopack-project cd my-turbopack-project npm init -y
This will create a
package.json
file with default settings.Install Turbopack: Run the following command to install Turbopack as a development dependency:
bash npm install --save-dev turbopack
Setting Up a Basic Project
Let’s set up a basic project structure and configure Turbopack to bundle a simple JavaScript file.
Project Structure: Create the following directory and file structure:
txt my-turbopack-project/ ├── src/ │ └── index.js ├── dist/ ├── package.json └── turbopack.config.js
Configure Turbopack: Create a
turbopack.config.js
file in the root of your project and add the following configuration:javascript // Import Turbopack const Turbopack = require('turbopack'); // Export the configuration object module.exports = { // Entry point of the application entry: './src/index.js', // Output configuration output: { path: __dirname + '/dist', filename: 'bundle.js' }, // Module rules to handle different file types module: { rules: [ { // Process JavaScript files test: /\.js$/, exclude: /node_modules/, use: 'babel-loader' } ] } };
Create the Entry Point: In the
src
directory, create anindex.js
file and add a simple JavaScript code:javascript // Log a message to the console console.log('Hello, Turbopack!');
Run Turbopack: Add a script to your
package.json
to run Turbopack:json "scripts": { "build": "turbopack" }
Now, run the following command to bundle your project:
bash npm run build
This will create a
bundle.js
file in thedist
directory.
Congratulations! You have successfully set up a basic Turbopack project. In the next lesson, we will explore the Turbopack configuration file in more detail and learn how to customize it for different needs.