Shopware 6 App开发：如何规范使用JavaScript并支持TypeScript？

针对你遇到的内联脚本无法压缩、不支持TypeScript的问题，Shopware 6 App有专门的前端资源处理流程，和传统插件的目录结构不同，具体步骤如下：

1. 规划目录结构 #

在你的App根目录下创建符合Shopware App规范的结构：

your-app/
├─ src/
│  ├─ Resources/
│  │  ├─ app/
│  │  │  └─ storefront/
│  │  │     ├─ src/
│  │  │     │  └─ main.ts  # 你的TS/JS入口文件
│  │  │     └─ webpack.config.js  # webpack配置文件
│  │  └─ public/
│  │     └─ storefront/
│  │        └─ js/
│  │           └─ app.js  # 打包后的输出文件
│  └─ views/
│     └─ storefront/base.html.twig  # 你的模板文件

2. 配置前端构建环境 #

在src/Resources/app/storefront/目录下创建package.json，添加依赖和构建脚本：

{
  "name": "your-app-storefront",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "build": "webpack --mode production",
    "watch": "webpack --mode development --watch"
  },
  "dependencies": {
    "@shopware-ag/storefront": "~6.4.0"  # 匹配你的Shopware版本
  },
  "devDependencies": {
    "webpack": "^5.0.0",
    "webpack-cli": "^4.0.0",
    "ts-loader": "^9.0.0",
    "typescript": "^4.0.0"
  }
}

如果使用TypeScript，添加tsconfig.json：

{
  "compilerOptions": {
    "target": "ES6",
    "module": "ESNext",
    "moduleResolution": "node",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "outDir": "../../public/storefront/js"
  },
  "include": ["src/**/*"]
}

配置webpack.config.js（简化版）：

const path = require('path');

module.exports = {
  entry: './src/main.ts',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  output: {
    filename: 'app.js',
    path: path.resolve(__dirname, '../../public/storefront/js'),
  },
};

3. 打包资源 #

进入src/Resources/app/storefront/目录，执行：

npm install
npm run build

生产模式下webpack会自动完成代码压缩、混淆，打包后的文件会输出到src/Resources/public/storefront/js/app.js。

4. 在模板中引入打包后的文件 #

修改你的base.html.twig，替换内联脚本为打包后的资源：

{% sw_extends '@Storefront/storefront/base.html.twig' %}

{% block base_body %}
  {{ parent() }}

  <script type="module" src="{{ asset('storefront/js/app.js', 'asset') }}"></script>
{% endblock %}

关键注意点 #

• Shopware 6 App的静态资源必须放在src/Resources/public/目录下，Shopware会自动同步该目录的资源到店铺静态资源路径，这是App和传统插件的核心区别，传统插件的Resources/app/目录在App模式下不生效。
• 开发时可以使用npm run watch监听文件变化，自动重新打包，提升开发效率。
• TypeScript代码会通过webpack和ts-loader编译为兼容的JavaScript，同时支持所有ES6+特性。

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