2017-07-14 50 views
-1

在應用程序中定義我喜歡我的狀態:的WebPack失敗而require.ensure打字稿文件

$stateProvider 
.state('index', { 
    url: '/', 
    controller: 'indexController', 
    resolve: { 
     foo: ['$q', '$ocLazyLoad', function ($q, $ocLazyLoad) { 
      let deferred = $q.defer(); 
      require.ensure([], function() {          
       let module = require('./index/test.ts')(angularRef); 
       $ocLazyLoad.load({ name: 'myAppIndex' });    
       deferred.resolve(module); 
      });   
      return deferred.promise; 
     }] 
    } 
}) 

的定義的WebPack看起來是這樣的:

... 
    module: { 
    loaders: [ 
     { 
      test: /\.js$/, 
      use: [ 
       { loader: 'babel-loader', query: { compact: true } }, 
      ] 
     },    
     { test: /\.ts?$/, loader: "ts-loader" }, 

     { 
      test: /\.css$/, 
      loader: ExtractTextPlugin.extract({ 
       fallback: "style-loader", 
       use: [ 
        { loader: 'css-loader', query: { modules: false, sourceMaps: false, minimize: true } } 
       ] 
      }) 
     }, { 
      test: /\.scss$/, 
      loader: ExtractTextPlugin.extract({ 
       fallback: "style-loader", 
       use: [ 
        { loader: 'css-loader', query: { modules: false, sourceMaps: false, minimize: true } }, 
        { loader: 'sass-loader', query: { sourceMaps: false } } 
       ] 
      }) 
     }, { 
      test: /\.html$/, 
      loader: 'raw-loader', 
      exclude: /node_modules/ 
     } 
    ] 
.... 

不要忘了tsconfig.json

{ 
    "compilerOptions": { 
    "module": "commonjs", 
    "lib": [ "es2015", "dom" ], 
    "typeRoots": [ 
     "./node_modules/@types/" 
    ], 

    "noImplicitAny": false, 
    "noEmitOnError": true, 
    "removeComments": false, 
    "sourceMap": true, 
    "target": "es5" 
    }, 
    "exclude": [ 
    "node_modules", 
    "wwwroot" 
    ] 
} 

但我每次編譯腳本與webpack 「webpack-dev-server --inline --watch --devtool EVAL --progress --colors --content基礎視圖」

我得到這個錯誤

main.bundle.js:1 TypeError: webpack_require(...) is not a function

的」 ./index/test.ts'獲取調用,它裏面有是一個「console.log」這就是所謂的

所以最大的問題是,我做錯了什麼?

回答

0

加上require的說法。 https://webpack.js.org/api/module-methods/#require-ensure

require.ensure([], function (require) {          
     let module = require('./index/test.ts')(angularRef); 
     $ocLazyLoad.load({ name: 'myAppIndex' });    
     deferred.resolve(module); 
    }); 
+0

我會毫不猶豫地嘗試這個,但在兩天(週末)。同時,這個需求論證的目的是什麼? 如果我用.JS文件做這件事情,一切都很好(即使沒有這個需要參數) –

+0

@Benjamin也許它工作,因爲它被解釋爲像普通的靜態'require'。我在答案中添加了文檔鏈接。 –

+0

謝謝,這將工作,我也不得不將oclazyload更新到最新版本。唯一的問題是在保存對應的打字稿文件時,在這種情況下「0.js」生成的塊文件沒有得到更新。 Webpack開始重新編譯,但塊文件仍然是一樣的,你有什麼想法什麼是錯的? –