时间戳

首页 > 解决方案 > AngularJs 1.x 项目从 Gulp/Grunt 迁移到 Webpack

javascript - AngularJs 1.x 项目从 Gulp/Grunt 迁移到 Webpack

问题描述

我有一个两年前的 AngularJs 1.x 项目，它是用 Gulp 构建的，用于开发和 Grunt 用于生产（不要问我为什么；我也不知道）。

构建过程基本上是：

  1. 将所有scss文件编译成一个css文件

  2. 将所有 JS 文件合并为一个 JS 文件。我们没有使用任何import机制。每个文件基本上都是 AngularJs 的控制器、组件、服务或过滤器之一。像这样的东西：

    angular.module("myApp").controller("myCtrl", function() {//...});

  3. 将所有 html 模板合并到一个 JS 文件中。每个模板都用$templateCache.

  4. 将图像和字体等资产移动到构建文件夹中。

  5. 将第三方库移动到构建文件夹中。

现在我想为这个项目切换到 webpack。我想逐步使这个项目现代化，但第一步就是使用 webpack 构建它，过程与上述类似。我想尽可能地保持代码库相同。我还不想添加import所有 JS 文件。有太多了。我还想添加一个babel-loader。

我有一些关于 webpack 的基本概念，但从未真正自己定制过配置。

有人可以给我一些指示吗？比如我需要哪些加载器/插件等？谢谢！

标签： javascriptangularjswebpack

解决方案

我进行这种过渡的过程是渐进的，我有类似的 Grunt 配置。

这些是我的笔记和步骤，以便过渡到 Webpack 堆栈。

最长的步骤是重构代码，使其使用 ES6 导入/导出（是的，我知道你说过这不是你想要的阶段，但避免黑客攻击很重要）。

最后每个文件看起来像这样：

//my-component.js

class MyComponentController { ... }

export const MyComponent = {
    bindings: {...},
    controller: MyComponentController, 
    template: `...`
}

//main.js

import {MyComponent} from 'my-component'
angular.module('my-module').component('myComponent', MyComponent);

为了不遍历所有文件并更改它们，我们重命名了所有 js 文件并添加了后缀.not_module.js. 这些文件是旧的未触及的文件。

我们grunt-webpack作为一个步骤添加到旧的构建系统（基于 Grunt）。它通过 Webpack 处理所有新文件（那些没有.not_module.js后缀的文件）。该步骤仅生成一个包含已转换的所有文件的包，该文件我们已添加到 concat 步骤。

一个接一个，每个转换后的文件逐渐从 Grunt 任务处理转移到 Webpack 处理。

您可以将webpack.config作为参考。

祝你好运。

推荐阅读