ES6 入门教程 部署与使用指南

1. Prerequisites

• Node.js (v14.0.0 or higher) - JavaScript runtime
• npm (v6.0.0 or higher) - Node package manager
• Git - Version control system
• Bower - Frontend package manager (for managing dependencies like marked)

2. Installation

Clone the repository

git clone https://github.com/ruanyf/es6tutorial.git
cd es6tutorial

Install dependencies

# Install Node.js dependencies
npm install

# Install Bower components
bower install

Install build tools (if needed)

# Install global tools
npm install -g gulp-cli

3. Configuration

Environment Variables

The project doesn't require specific environment variables for local development.

Configuration Files

• ditto.js - Main configuration file for UI elements and behavior
• store.js - Local storage configuration for saving reading progress

Customization Options

In ditto.js, you can configure:

var ditto = {
    // Display elements
    sidebar: true,           // Show sidebar
    edit_button: true,       // Show edit button
    back_to_top_button: true, // Show back to top button
    theme_button: true,      // Show theme button
    save_progress: true,     // Save reading progress
    search_bar: true,        // Show search bar
    wwads: true,             // Show ads
    
    // Element IDs
    content_id: "#content",
    sidebar_id: "#sidebar",
    edit_id: "#edit",
    back_to_top_id: "#back_to_top",
    theme_id: "#theme",
    loading_id: "#loading",
    error_id: "#error",
    
    // File paths
    sidebar_file: "sidebar.md" // Sidebar content file
};

4. Build & Run

Development Mode

# Start development server
npm run dev

# Or use gulp directly
gulp serve

Production Build

# Build for production
npm run build

# Or use gulp directly
gulp build

Run Locally

After building, open index.html in your browser or use a simple HTTP server:

# Using Python
python -m http.server 8000

# Using Node.js
npx serve .

5. Deployment

Static Hosting Platforms

This project is a static website and can be deployed to any static hosting service:

GitHub Pages

# Deploy to GitHub Pages
npm run deploy

Or manually:

# Build the project
npm run build

# Commit and push to gh-pages branch
git checkout gh-pages
git add .
git commit -m "Deploy to GitHub Pages"
git push origin gh-pages

Netlify

1. Connect your GitHub repository to Netlify
2. Set build command: npm run build
3. Set publish directory: dist (or your build output directory)
4. Deploy

Vercel

1. Import your repository
2. Set build command: npm run build
3. Set output directory: dist
4. Deploy

Other Options

• Surge.sh: npm install -g surge && surge dist
• Firebase Hosting: npm install -g firebase-tools && firebase deploy
• AWS S3 + CloudFront: Upload build files to S3 bucket

6. Troubleshooting

Common Issues and Solutions

Issue: Bower dependencies not installing

Solution: Ensure Bower is installed globally and run bower install

npm install -g bower
bower install

Issue: Build fails with missing modules

Solution: Clear node_modules and reinstall

rm -rf node_modules
npm install

Issue: Sidebar content not loading

Solution: Check the sidebar_file path in ditto.js

// Verify this path exists
sidebar_file: "sidebar.md"

Issue: Markdown not rendering properly

Solution: Check the marked.js library version and compatibility

# Update marked.js
npm update marked

Issue: Search functionality not working

Solution: Ensure the search bar is enabled in configuration

// In ditto.js
search_bar: true

Issue: Theme switching not working

Solution: Check CSS theme files and ensure they're properly linked

Issue: Reading progress not saving

Solution: Verify browser allows localStorage and save_progress is enabled

// In ditto.js
save_progress: true

Debug Mode

Enable debug logging by adding to your browser console:

localStorage.debug = 'ditto:*';

Performance Tips

• Clear browser cache after updates
• Use production build for better performance
• Consider using a CDN for static assets
• Enable gzip compression on your hosting server

Browser Compatibility

The project uses modern JavaScript features. For older browsers, consider adding polyfills or using a transpiler like Babel.