如何按NPM流程修改Webpack生成的JS文件？GeneratePress子主题场景

如果子主题里只有Webpack打包后的生产环境JS文件，缺失开发所需的package.json、Webpack配置及区块源码，按以下NPM流程操作：

1. 初始化NPM环境 #

在子主题根目录打开终端，执行命令生成基础的package.json：

npm init -y

2. 安装WordPress官方打包工具 #

使用WordPress官方提供的@wordpress/scripts（内置预配置的Webpack、Babel等工具，无需手动编写Webpack配置），执行安装命令：

npm install @wordpress/scripts --save-dev

3. 还原区块可编辑源码 #

• 优先找原开发者要源码：打包后的JS经过压缩混淆，可读性极差，能拿到原始的src目录（包含区块的JSX/JS、样式源码）是最优解。
• 无源码时反编译处理：若无法获取源码，可对现有打包JS进行反编译整理：
  1. 安装代码格式化工具：npm install js-beautify --save-dev
  2. 对打包文件执行格式化：npx js-beautify -r [打包后的JS文件路径]
  3. 从格式化后的代码中提取核心区块逻辑（重点找registerBlockType相关代码），将其整理为单独的源码文件，放在子主题的src/blocks/[区块名称]/index.js路径下。

4. 配置打包脚本 #

在package.json的scripts字段中添加编译命令，指定源码路径和输出路径（需对应子主题中原区块JS的存放位置）：

"scripts": {
  "start": "wp-scripts start src/blocks/[区块名称]/index.js --output-path=./assets/js/blocks",
  "build": "wp-scripts build src/blocks/[区块名称]/index.js --output-path=./assets/js/blocks"
}

• start命令用于开发时实时编译，修改源码后自动更新打包文件；
• build命令用于生成生产环境的压缩版JS文件。

5. 修改区块逻辑 #

编辑src/blocks/[区块名称]/index.js文件，按需修改区块的注册配置、编辑器渲染、前端输出等逻辑，比如调整区块属性、修改样式、新增功能等。

6. 编译与替换文件 #

• 开发测试：执行npm start，在WordPress后台打开编辑器，实时预览区块修改效果；
• 生产打包：确认修改无误后，执行npm run build生成最终的打包文件，替换子主题中原有的旧打包JS文件。

额外注意事项 #

• 如果区块关联了自定义样式，需将样式源码（如SCSS/CSS文件）放入src目录对应路径，修改打包命令同时编译样式：wp-scripts build src/blocks/[区块名称]/index.js src/blocks/[区块名称]/style.scss --output-path=./assets；
• 检查子主题functions.php中注册区块的代码，确保wp_enqueue_script引用的是新打包文件的路径；
• 若原区块依赖其他自定义工具函数，需同步将这些函数提取到源码目录中，保证编译时能正确引入。

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