Question

嘿，我在EcmaScript 5（不是ES6）中编写了一个有角度的webapp，我想在我当前的应用程序中插入webpack。

我的旧webapp使用ocLazyLoad按需加载脚本。现在我使用webpack和ocLazyLoad创建了一个小型webapp。

我的小应用程序使用ES6并有3个视图：Home，View1，View2。

现在我使用ui-router在视图之间进行路由，我正在尝试使用ocLazyLoad为特定视图加载特定的指令。当我意识到我的指令文件不在webpack的环境中时，问题就开始了，因此导入角度并不能识别为法律声明。

如果webpack要求我将所有js文件输入到一个bundle.js文件中，如何使用ocLazyLoad和webpack加载文件。

我可以针对每个视图进行代码拆分吗？如果是，如何进行？

index.js

import "./main"

main.js

//Import third-party libraries
import angular from 'angular';
import uiRouter from 'angular-ui-router';
import angularCSS from 'angular-css';
import oclazyload from 'oclazyload';

//Import custom modules
import directives from './custom/modules/modules';

//Import Controllers
import homeCTRL from './custom/controllers/homeCTRL';
import viewOneCTRL from './custom/controllers/viewOneCTRL';
import viewTwoCTRL from './custom/controllers/viewTwoCTRL';


//Define app module
var app = angular.module("app",[uiRouter,angularCSS,oclazyload,directives.name]);

//Define controllers
app.controller("homeCTRL",homeCTRL);
app.controller("viewOneCTRL",viewOneCTRL);
app.controller("viewTwoCTRL",viewTwoCTRL);

//bootstrap the app
angular.element(document).ready(function () {
    angular.bootstrap(document, ['app']);
});

/* Setup Rounting For All Pages */
app.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
    // Redirect any unmatched url
    $urlRouterProvider.otherwise("/home");

    $stateProvider
      .state("home", {
          url: "/home",
          template: require('../views/home.html'),
          data: {
              pageTitle: 'home'
          },
          controller: 'homeCTRL',         
          activetab: 'home',
          css: 'css/home.css',
          resolve: {
              deps: ['$ocLazyLoad', function ($ocLazyLoad) {
                  return $ocLazyLoad.load({
                      name: 'app',
                      files: [
                        'src/custom/directives/directiveOne.js'
                      ]
                  });
              }]
          }
      })
       .state("view1", {
          url: "/view1",
          template: require('../views/view1.html'),
          data: {
              pageTitle: 'view1'
          },
          controller: 'viewOneCTRL',
          activetab: 'view1',
          css: 'css/view1.css'
      })
       .state("view2", {
          url: "/view2",
          template: require('../views/view2.html'),
          data: {
              pageTitle: 'view2'
          },
          controller: 'viewTwoCTRL',
          activetab: 'view2',
          css: 'css/view2.css'
      })
}]);

directiveOne.js（此处为错误）

import angular from 'angular';

angular.module('directives').directive('mySharedScope', function () {
    return {
        template: '<p>I am a directive One</p>'
    };
});

modules.js（加载模块一次）

import angular from 'angular';

export default angular.module("directives",[]);

controlerHome（例如）

export default function($scope){
    $scope.message = "You are in homeCTRL";
};

我的webpack配置文件：

const path = require('path');

const config = {
    entry: './src/index.js',                    /** relative address **/
    output:{
        path: path.resolve(__dirname,'build'), /** absolute path **/
        filename: 'bundle.js',
        publicPath:'./build/'
    },
    module:{
        rules:[
            {
                use: 'babel-loader',
                exclude: /(node_modules|bower_components)/,
                test: /\.js$/,

            },
            { 
                use: 'html-loader',
                test: /\.html$/
            },
            {
                use:['style-loader','css-loader'],
                test: /\.css$/,
            },
           /* {
                test: /\.(jpe?g|png|gif|svg)$/,
                use:[
                    {
                        loader:'url-loader',
                        options: { limit: 40000 } 
                    },
                    'image-webpack-loader'
                ]
            }*/
        ]
    }
};

module.exports = config;

修改我试图进行代码拆分但没有成功，我已经成功地执行了该指令，但该指令并不能很好地工作。

/* Setup Rounting For All Pages */
app.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
    // Redirect any unmatched url
    $urlRouterProvider.otherwise("/home");

    $stateProvider
      .state("home", {
          url: "/home",
          template: require('../views/home.html'),
          data: {
              pageTitle: 'home'
          },
          controller: 'homeCTRL',         
          activetab: 'home',
          css: 'css/home.css',
          resolve: {
              deps: ['$ocLazyLoad','$timeout', function ($ocLazyLoad,$timeout) {
                    $timeout(function(){ 
                        var promise = System.import('../src/custom/directives/directiveOne.js')
                        promise.then(function(data){
                            console.log(data);
                        })
                    });
              }]
          }
      })
       .state("view1", {
          url: "/view1",
          template: require('../views/view1.html'),
          data: {
              pageTitle: 'view1'
          },
          controller: 'viewOneCTRL',
          activetab: 'view1',
          css: 'css/view1.css'
      })
       .state("view2", {
          url: "/view2",
          template: require('../views/view2.html'),
          data: {
              pageTitle: 'view2'
          },
          controller: 'viewTwoCTRL',
          activetab: 'view2',
          css: 'css/view2.css'
      })
}]);

Answer 1

使用webpack'动态导入'。这会为每个导入创建一个新块，可以使用ocLazyLoad延迟加载

例如 import（'c3-angular'） - webpack在调用它时创建一个新的chuck并返回一个可用于触发ocLazyLoad的promise

import('c3-angular').then(function(c3Ang){
    $ocLL.load({name: 'gridshore.c3js.chart'});
})

您可以存储具有一组Promises for dependencies的对象以及传递给ocLazyLoad所需的模块名称

例如

    ngTagsInput: {
        promise: Promise.all([
            import('ng-tags-input/build/ng-tags-input.min.js'),
            import('ng-tags-input/build/ng-tags-input.min.css'),
            import('ng-tags-input/build/ng-tags-input.bootstrap.min.css')
        ]),
        name: 'ngTagsInput'
    }

如何集成ocLazyLoad和Webpack或每个视图的代码拆分

1 个答案: