Ext.js 7与开放工具能否使用ES6类语法？相关实现咨询

Great question! Let’s clear up your confusion around Ext JS 7 and ES6 class syntax support—Sencha has made huge strides with modern tooling since that 2017 Roadshow.

Does Ext JS 7 and the latest tooling support ES6/ES2015 class syntax? #

Absolutely! Ext JS 7 and later fully support ES6/ES2015 class syntax, and Sencha’s modern toolchain (including Sencha Cmd 7+ and npm-based tooling) is built to handle this natively. You no longer need to rely solely on the old Ext.define syntax if you prefer writing standard ES6 classes.

How to install Ext JS via npm and use ES6 import statements #

Here’s a step-by-step guide to get started with npm-based ES6 modules:

1. Install the Ext JS npm package
   First, add the official Ext JS package to your project using npm:

   npm install @sencha/ext --save
   

   If you’re targeting a specific toolkit (Modern or Classic), install the focused package instead:

   npm install @sencha/ext-modern --save
   

2. Import Ext JS modules correctly
   Your initial example import { Ext, define } from "@extjs/core" isn’t the right approach for modern Ext JS. Instead, import the core Ext object or specific components directly from the npm packages:

   • Import the core Ext namespace:

     import Ext from '@sencha/ext';
     

   • Import specific components to keep your bundle size lean:

     import Panel from '@sencha/ext-panel';
     import Button from '@sencha/ext-button';
     

3. Write ES6 classes instead of Ext.define
   With ES6 support, you can extend Ext JS components using standard class syntax:

   import Ext from '@sencha/ext';
   import Panel from '@sencha/ext-panel';
   
   class MyCustomPanel extends Panel {
       constructor(config) {
           // Call the parent component's constructor
           super(config);
   
           // Configure your custom panel
           this.title = 'ES6 Class Example';
           this.width = 400;
           this.height = 200;
           this.html = 'Hello from an ES6 Ext JS Component!';
           this.renderTo = document.body;
       }
   }
   
   // Instantiate your custom panel
   new MyCustomPanel();
   

4. Toolchain configuration
   If you’re using webpack or Vite, you’ll need Sencha’s official plugins to handle Ext JS module resolution and bundling:

   • For webpack: Install @sencha/ext-webpack-plugin and add it to your webpack configuration.
   • For Vite: Use @sencha/ext-vite-plugin to integrate Ext JS into your Vite project.

Running ES6 Ext JS application examples #

You can find working ES6-based Ext JS examples in a few accessible places:

• Sencha Fiddle: Search for "ES6 Class" in the fiddle library—you’ll find pre-built examples demonstrating ES6 class extensions for both Modern and Classic toolkits.
• Sencha Cmd initialization: When creating a new Ext JS 7 project with Sencha Cmd, select the "Modern" template. The generated app uses ES6 classes by default (check app/view/Main.js for a sample class extending Ext.Panel).
• Official Sencha docs: The Ext JS 7 documentation includes ES6-specific code snippets and full application examples you can clone or run locally.

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