maba/webpack-migration-bundle

帮助从Assetic迁移到Webpack的包

0.2.0 2016-06-11 19:37 UTC

This package is auto-updated.

Last update: 2024-09-10 20:07:30 UTC


README

帮助将assetic集成到webpack的包。

它使用maba/webpack-bundlesymfony/assetic-bundle作为依赖项。

它会在您的仓库中创建和修改文件。这意味着它不适合在生产环境中运行 - 安装它,使用它,然后从项目中移除它。始终确保使用版本控制系统如git,并且没有未提交的更改,以免丢失文件。

Webpack是什么?为什么要从Assetic迁移?

Webpack是模块打包器和CommonJS / AMD依赖管理器。

对我来说,它取代了grunt/gulp和RequireJS。

有关Webpack的更多信息,请参阅什么是Webpack?其文档

有关与Assetic和基于Webpack的替代方案的比较,请参阅maba/webpack-bundle

这个包做了什么?

  1. 在您的twig模板中查找assetic节点(stylesheetsjavascripts节点)。
  2. 导出表示打包资产的js文件。
  3. 用带有对导出文件的引用的webpack_asset函数替换它们。
  4. config.yml中导出配置的命名资产。

使用twig-template-modification-bundle来替换twig模板本身。

值得注意的是,它确实支持assetic变量,但结果可使用,但在长期内难以管理。请参阅其他方法,通过从javascript本身的条件加载来实现此目的。请参阅symfony-webpack-angular-demo,了解如何使用区域设置来完成此操作。

还值得注意的是,它忽略了images assetic节点和其他具有未识别过滤器的节点。您可以通过提供maba_webpack_migration.ignored_filters参数在config.yml中配置要忽略的过滤器。

默认情况下,以下过滤器被忽略

  • cssrewrite
  • less
  • lessphp
  • scssphp
  • sassphp
  • jsqueeze
  • uglifyjs
  • uglifyjs2
  • uglifycss
  • yui_css
  • yui_js

它们被忽略,因为默认情况下,在生产环境中对jscss文件进行了压缩,而SCSS和Less文件可以直接使用。假设您使用了正确的文件扩展名(例如,Less文件为.less等)。

安装和使用

composer require maba/webpack-migration-bundle

AppKernel内部

new Maba\Bundle\WebpackBundle\MabaWebpackBundle(),  // if you don't have it already
new Maba\Bundle\WebpackBundle\MabaTwigTemplateModificationBundle(), // dependency
new Maba\Bundle\WebpackBundle\MabaWebpackMigrationBundle(),

webpack bundle的设置文件(有关更多信息,请参阅maba/webpack-bundle

app/console maba:webpack:setup

配置Webpack将CSS提取到单独的文件中。这是使stylesheets标签正常工作所必需的。

maba_webpack:
    config:
        parameters:
            extract_css: true

安装WebpackMigrationBundle使用的npm依赖项,这些依赖项在WebpackBundle中未默认安装

npm install imports-loader exports-loader expose-loader --save-dev

在webpack上下文中,this 并不指向 window,就像添加通用的<script>标签时那样,而是指向 module.exports。大多数库默认处理这种情况,在以这种方式运行时,不会在全局上下文(window)中注册变量,它们只是以CommonJS的方式导出。

这会导致问题,因为你的当前代码期望在全局上下文中找到 jQueryangular 等等。

这个包会分析JavaScript文件中的常见模式,并尝试使用正确的加载器来修复这些问题。这并不总是能立即解决问题。你可以使用额外的加载器或修改生成的代码——这个包只创建和替换你仓库中的文件,之后的所有代码修改都可以手动进行。

运行替换命令

app/console maba:webpack-migration:modify-twig-templates

现在你的twig文件已经修改过了——你可以安全地从你的kernel和vendors中移除这两个包(这个和MabaTwigTemplateModificationBundle)。你可以在 AppKernel.phpcomposer.jsoncomposer.lock 中撤销你的更改,确认你已经单独安装了MabaWebpackBundle。

运行测试

Travis status

composer install
vendor/bin/phpunit