試圖讓茉莉花與Webpack一起工作

我試圖從tsc遷移項目到webpack，這樣我可以捆綁所有腳本。現在，我遇到了Jasmine的一個問題：TS2304：找不到'describe'的名字。這裏是我的人緣配置：試圖讓茉莉花與Webpack一起工作

module.exports = function(config) { 

    var appBase = 'app/';  // transpiled app JS and map files 
    var appSrcBase = 'app/';  // app source TS files 
    var appAssets = '/base/app/'; // component assets fetched by Angular's compiler 

    // Testing helpers (optional) are conventionally in a folder called `testing` 
    var testingBase = 'testing/'; // transpiled test JS and map files 
    var testingSrcBase = 'testing/'; // test source TS files 

    config.set({ 
    basePath: '', 
    frameworks: ['jasmine'], 

    plugins: [ 
     require('karma-jasmine'), 
     require('karma-chrome-launcher'), 
     require('karma-jasmine-html-reporter') 
    ], 

    client: { 
     builtPaths: [appBase, testingBase], // add more spec base paths as needed 
     clearContext: false // leave Jasmine Spec Runner output visible in browser 
    }, 

    customLaunchers: { 
     // From the CLI. Not used here but interesting 
     // chrome setup for travis CI using chromium 
     Chrome_travis_ci: { 
     base: 'Chrome', 
     flags: ['--no-sandbox'] 
     } 
    }, 

    files: [ 
     // System.js for module loading 
     'node_modules/systemjs/dist/system.src.js', 

     // Polyfills 
     'node_modules/core-js/client/shim.js', 

     // zone.js 
     'node_modules/zone.js/dist/zone.js', 
     'node_modules/zone.js/dist/long-stack-trace-zone.js', 
     'node_modules/zone.js/dist/proxy.js', 
     'node_modules/zone.js/dist/sync-test.js', 
     'node_modules/zone.js/dist/jasmine-patch.js', 
     'node_modules/zone.js/dist/async-test.js', 
     'node_modules/zone.js/dist/fake-async-test.js', 

     // RxJs 
     { pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false }, 
     { pattern: 'node_modules/rxjs/**/*.js.map', included: false, watched: false }, 

     // Paths loaded via module imports: 
     // Angular itself 
     { pattern: 'node_modules/@angular/**/*.js', included: false, watched: false }, 
     { pattern: 'node_modules/@angular/**/*.js.map', included: false, watched: false }, 

     { pattern: 'systemjs.config.js', included: false, watched: false }, 
     'karma-test-shim.js', // optionally extend SystemJS mapping e.g., with barrels 

     // transpiled application & spec code paths loaded via module imports 
     { pattern: appBase + '**/*.js', included: false, watched: true }, 
     { pattern: testingBase + '**/*.js', included: false, watched: true }, 


     // Asset (HTML & CSS) paths loaded via Angular's component compiler 
     // (these paths need to be rewritten, see proxies section) 
     { pattern: appBase + '**/*.html', included: false, watched: true }, 
     { pattern: appBase + '**/*.css', included: false, watched: true }, 

     // Paths for debugging with source maps in dev tools 
     { pattern: appSrcBase + '**/*.ts', included: false, watched: false }, 
     { pattern: appBase + '**/*.js.map', included: false, watched: false }, 
     { pattern: testingSrcBase + '**/*.ts', included: false, watched: false }, 
     { pattern: testingBase + '**/*.js.map', included: false, watched: false} 
    ], 

    // Proxied base paths for loading assets 
    proxies: { 
     // required for component assets fetched by Angular's compiler 
     "/app/": appAssets 
    }, 

    exclude: [], 
    preprocessors: {}, 
    reporters: ['progress', 'kjhtml'], 
    webpack: require('./webpack.config.js'), 

    port: 9876, 
    colors: true, 
    logLevel: config.LOG_INFO, 
    autoWatch: true, 
    browsers: ['Chrome'], 
    singleRun: false 
    }) 
}

這裏是我的WebPack配置：

var ExtractTextPlugin = require('extract-text-webpack-plugin'); 

module.exports = { 
    entry: ["./src/ts/main.ts","./src/ts/css.ts"], 
    module: { 
     rules: [ 
     { 
      test: /\.ts$/, 
      loaders: [ 
      { 
       loader: 'awesome-typescript-loader', 
       options: { configFileName: 'tsconfig.json' } 
      } , 'angular2-template-loader' 
      ] 
     }, 
     { 
      test: /\.jsx$/, 
      use: "babel-loader" 
     }, 
     { 
      test: /\.html$/, 
      use: "html-loader" 
     }, 
     { 
      test: /\.css$/, 
      use: ExtractTextPlugin.extract({use: 'css-loader'}) 
     }, 
     { 
      test: /\.(jpe?g|png|gif|svg)$/i, 
      use: ['url-loader?limit=10000', 'img-loader'] 
     }, 
     { 
      test: /\.(eot|woff2?|ttf)$/i, 
      use: 'url-loader' 
     } 
     ] 
    }, 
    resolve: { 
    extensions: [".tsx", ".ts", ".js"] 
    }, 
    plugins: [ 
    new ExtractTextPlugin("public/styles.css"), 
    ], 
    output: { 
    filename: "public/bundle.js" 
    } 
}

我得到這個沒有在那裏。我迄今發現的幫助只是給了我「無法找到名字」或「模塊未找到：錯誤：無法解決'錯誤中的'fs'。

來源

2017-04-21 Troy Taylor

有你茉莉安裝類型，並宣佈它在你的tsconfig文件中像這樣「類型」：[「jasmine」] –

我做過了，如果我只使用tsc，編譯就好了，但我需要webpack來合併所有腳本。 –

您需要安裝類型茉莉

npm i --save-dev @types/jasmine

，然後在tsconfig文件中聲明它

"types": ["jasmine"]

來源

2017-04-21 15:52:13

「karma start」仍然不會運行webpack，並且webpack命令仍會給出「TS2304：找不到名稱」描述錯誤。 –

試圖讓茉莉花與Webpack一起工作

回答

相關問題