准备

安装 r.js
安装 terser，用于压缩

  1. npm install -g requirejs
  2. npm install -g terser

安装m2 devtool生成bundle-config.js

https://github.com/magento/m2-devtools

  1. npm install
  2. npm run build

然后安装chrome扩展
工具栏打开M2 DevTools，RequireJS >> Bundle Generator点击record记录，完成后点击record结束。
网站目录添加requirejs-config-bundle.js，代码粘贴进去。
修改rjs-config
参考https://github.com/integer-net/magento2-requirejs-bundling/commit/883962adf013efd5ee0551ea2700987e3a78d1a1#diff-4333a40a1784ff0986cd218e1e965bd9

核心机制，将生成的bundle 配置注入到requirejs-config.js

打包bundle文件

编译主题

  1. php bin/magento setup:static-content:deploy -f en_US

创建bundle.js

  1. THEME_FOLDER=('pub/static/frontend/Muzi/dev/')
  2. find ${THEME_FOLDER[@]} -mindepth 1 -maxdepth 1 \( -not -name '*_source' \) -type d -execdir mv -f \{} \{}_source \;
  3. find ${THEME_FOLDER[@]} -mindepth 1 -maxdepth 1 \( -name '*_source' \) -type d -exec bash -c 'r.js -o requirejs-bundle-config.js baseUrl=\{} dir="${@%"_source"}"' bash {} \;
  4. BUNDLED_THEMES=$(find ${THEME_FOLDER[@]} -mindepth 1 -maxdepth 1 \( -not -name '*_source' \) -type d);
  5. find ${BUNDLED_THEMES[@]} -path '*bundles*' \( -name '*.js' -not -name '*.min.js' \) -exec terser \{} -c -m reserved=['$','jQuery','define','require','exports'] -o \{} \;
  6. find ${BUNDLED_THEMES[@]} \( -name 'require.js' -o -name 'requirejs-config.js' \) -exec terser \{} -c -m reserved=['$','jQuery','define','require','exports'] -o \{} \;

每次修改js文件和部署都要重新生成bundle

如何撤销，只需要重新deploy部署即可