如何将生成的JavaScript文件存入项目目录？开发时生成commons.js方法

Great question! Let’s break this down clearly—commons.js is almost always a code-split shared chunk generated by frontend build tools like Webpack, Vite, or Rollup. Here’s how to make it available in development and integrate it with Rails/Django for your view layer.

Why commons.js is missing in development #

By default, most frontend build tools optimize for speed in development:

• They may inline shared code directly into your main bundle instead of splitting it into a separate commons.js file.
• Some tools (like Vite) use in-memory compilation in development, so physical chunk files aren’t written to disk.
• Chunk naming might differ (e.g., vendors.js instead of commons.js) unless explicitly configured.

Configuring your build tool to generate commons.js in development #

The exact steps depend on which tool you’re using—here are the most common setups:

Webpack #

Add explicit code-splitting rules to your webpack.config.js to force a commons.js chunk even in development mode:

module.exports = {
  mode: 'development',
  optimization: {
    splitChunks: {
      chunks: 'all',
      name: 'commons', // Explicitly name the chunk "commons"
      cacheGroups: {
        commons: {
          test: /[\\/]node_modules[\\/]/, // Split vendor dependencies into commons
          priority: -10
        },
        default: {
          minChunks: 2, // Split code used in 2+ files into commons
          priority: -20,
          reuseExistingChunk: true
        }
      }
    }
  }
};

Run your dev server or build command, and you’ll find commons.js in your output directory (usually dist/ or public/assets/).

Vite #

Vite uses in-memory ES modules in its dev server, so physical chunk files aren’t generated by default. To get a commons.js file in development:

1. Add manual chunking rules to your vite.config.js:

   import { defineConfig } from 'vite';
   
   export default defineConfig({
     build: {
       rollupOptions: {
         output: {
           manualChunks: {
             commons: ['vue', 'axios', 'lodash'] // List dependencies to bundle into commons
           }
         }
       }
     }
   });
   

2. Run a development build instead of the dev server:

   vite build --mode development
   

This will write commons.js to your output directory (default: dist/).

Rollup #

Configure manual chunking in your rollup.config.js:

export default {
  input: 'src/main.js',
  output: {
    dir: 'dist',
    format: 'esm',
    manualChunks: {
      commons: ['react', 'react-dom', 'axios'] // Specify shared dependencies
    }
  },
  plugins: [/* Your plugins (e.g., @rollup/plugin-node-resolve) */]
};

Run Rollup in watch mode to regenerate commons.js as you code:

rollup -c --watch

Integrating commons.js with Rails or Django #

Once commons.js is generated in development, you can hook it up to your backend framework’s view system easily:

Ruby on Rails #

• If using jsbundling-rails or Webpacker: Ensure your build output directory (e.g., app/assets/builds) contains commons.js. Then add it to your layout template (e.g., application.html.erb):

  <%= javascript_include_tag 'commons', defer: true %>
  <%= javascript_include_tag 'application', defer: true %>
  

  Note: Load commons.js before your main application bundle—this ensures shared code is available when needed.
• Manifest files: If your build tool generates hashed filenames (e.g., commons.abc123.js), use the generated manifest.json to reference the file dynamically (jsbundling-rails handles this automatically with javascript_include_tag).

Django #

• Copy commons.js to your project’s static/js/ directory (or add your build output directory to STATICFILES_DIRS in settings.py).
• In your base template, load the static tag and include the file:

  {% load static %}
  <script src="{% static 'js/commons.js' %}" defer></script>
  <script src="{% static 'js/main.js' %}" defer></script>
  

• If using hashed filenames, use a tool like django-webpack-loader to read the manifest file and inject the correct chunk URLs.

Key Tips #

• Development build speeds may slow slightly when generating commons.js, but it’s a small tradeoff for end-to-end view testing.
• Always double-check load order—missing dependencies will throw ReferenceError if commons.js loads after the bundles that need it.
• For hot-reloading in development (with tools like Webpack Dev Server), ensure your backend framework serves the updated commons.js file from the build output directory.

内容的提问来源于stack exchange，提问作者simo