Installation and Setup

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.

  1. 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.

  2. 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.

  1. Project Structure: Create the following directory and file structure:

    txt
    	my-turbopack-project/
    	├── src/
    	│   └── index.js
    	├── dist/
    	├── package.json
    	└── turbopack.config.js
  2. 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'
    	      }
    	    ]
    	  }
    	};
  3. Create the Entry Point: In the src directory, create an index.js file and add a simple JavaScript code:

    javascript
    	// Log a message to the console
    	console.log('Hello, Turbopack!');
  4. 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 the dist 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.