Question

我尝试为我的React app设置Karma。我的堆栈看起来像这样：

噶
阵营
的WebPack
打字稿

对于我的React应用程序，我需要一些自定义类型（src/typings.d.ts）：

declare module '*.json' {
    const value: any;
    export default value;
}

//No definitions for redux-persist version 5. :(
declare module 'redux-persist';
declare module 'redux-persist/es/integration/react';
declare module 'redux-persist/es/storage';

我的karma.conf.ts看起来像这样：

const karma = (config: any) => {
    config.set({
        basePath: '',
        browsers: ['ChromeHeadless'],
        frameworks: ['mocha'],
        files: ['test/actions/errorTests.ts'],
        preprocessors: {
            'test/actions/errorTests.ts': ['webpack']
        },

        webpack: {
            entry: ['./src/main.tsx'],

            resolve: {
                extensions: ['.webpack.js', '.web.js', '.ts', '.tsx', '.js']
            },

            module: {
                rules: [
                    {
                        test: /\.tsx?$/,
                        exclude: '/node_modules/',
                        use: 'awesome-typescript-loader'
                    }, {
                        test: /\.scss$/,
                        exclude: '/node_modules/',
                        use: [{
                            loader: 'style-loader'
                        }, {
                            loader: 'typings-for-css-modules-loader',
                            options: {
                                modules: true,
                                namedExport: true,
                                sass: true
                            }
                        }, {
                            loader: 'sass-loader',
                            query: {
                                sourceMap: true
                            }
                        }]
                    }
                ]
            }
        },
        webpackMiddleware: {
            noInfo: true
        }
    });
};

export = karma;

当我运行karma start --single-run时，我得到以下输出：

$ karma start --single-run

[at-loader] Using typescript@2.5.2 from typescript and "tsconfig.json" from /Users/rbu0374/Development/octodent/octodent.git/client/tsconfig.json.


[at-loader] Checking started in a separate process...

[at-loader] Ok, 0.721 sec.

[at-loader] Checking started in a separate process...

[at-loader] Checking finished with 4 errors
Hash: 22917d06732ce0b1f6aa
Version: webpack 3.6.0
Time: 2234ms
                     Asset     Size  Chunks                    Chunk Names
                      main  1.29 MB       0  [emitted]  [big]  main
test/actions/errorTests.ts   344 kB       1  [emitted]  [big]  test/actions/errorTests.ts
   [4] ./node_modules/react/react.js 56 bytes {0} [built]
  [20] ./node_modules/react-intl/lib/index.es.js 51.2 kB {0} [built]
  [28] ./node_modules/redux/es/index.js 1.08 kB {0} [built]
  [30] ./src/constants/actions.ts 399 bytes {0} {1} [built]
  [78] ./node_modules/history/es/index.js 460 bytes {0} [built]
 [151] ./src/actions/error.ts 307 bytes {0} {1} [built]
 [154] multi ./src/main.tsx 28 bytes {0}
 [155] ./src/main.tsx 2.04 kB {0} [built]
 [310] ./node_modules/redux-persist/es/index.js 1.7 kB {0} [built]
 [316] ./node_modules/redux-persist/es/integration/react.js 3.41 kB {0} [built]
 [317] ./node_modules/redux-persist/es/storage/index.js 362 bytes {0} [built]
 [320] ./src/reducers/index.ts 471 bytes {0} [built]
 [324] ./src/containers/app/index.tsx 2.85 kB {0} [built]
 [408] ./test/actions/errorTests.ts 533 bytes {1} [built]
 [409] ./node_modules/chai/index.js 40 bytes {1} [built]
    + 417 hidden modules

ERROR in [at-loader] ./src/main.tsx:10:44 
    TS7016: Could not find a declaration file for module 'redux-persist'. '/Users/rbu0374/Development/octodent/octodent.git/client/node_modules/redux-persist/lib/index.js' implicitly has an 'any' type.
  Try `npm install @types/redux-persist` if it exists or add a new declaration (.d.ts) file containing `declare module 'redux-persist';`

ERROR in [at-loader] ./src/main.tsx:11:27 
    TS7016: Could not find a declaration file for module 'redux-persist/es/integration/react'. '/Users/rbu0374/Development/octodent/octodent.git/client/node_modules/redux-persist/es/integration/react.js' implicitly has an 'any' type.
  Try `npm install @types/redux-persist/es/integration/react` if it exists or add a new declaration (.d.ts) file containing `declare module 'redux-persist/es/integration/react';`

ERROR in [at-loader] ./src/main.tsx:12:21 
    TS7016: Could not find a declaration file for module 'redux-persist/es/storage'. '/Users/rbu0374/Development/octodent/octodent.git/client/node_modules/redux-persist/es/storage/index.js' implicitly has an 'any' type.
  Try `npm install @types/redux-persist/es/storage` if it exists or add a new declaration (.d.ts) file containing `declare module 'redux-persist/es/storage';`

ERROR in [at-loader] ./src/main.tsx:16:31 
    TS2307: Cannot find module './locales/de-ch.json'.
20 09 2017 15:16:40.808:INFO [karma]: Karma v1.7.1 server started at http://0.0.0.0:9876/
20 09 2017 15:16:40.810:INFO [launcher]: Launching browser ChromeHeadless with unlimited concurrency
20 09 2017 15:16:40.878:INFO [launcher]: Starting browser ChromeHeadless
20 09 2017 15:16:41.232:INFO [HeadlessChrome 0.0.0 ()]: Connected on socket 61TQigS-rNwcBsx1AAAA with id 15095982
HeadlessChrome 0.0.0 (): Executed 0 of 0 ERROR (0.002 secs / 0 secs)
error Command failed with exit code 1.

有人知道为什么我的打字文件会被忽略吗？当我用webpack捆绑我的应用程序时，它可以正常工作。

提前谢谢！

Answer 1

我在堆栈中遇到的问题与您的类似：

奥雷利亚
打字稿
Webpack
业力

我们在src文件夹中也有types.d.ts，因此我们可以加载json文件。

在我们的webpack.config.js中为awesome-typescript-loader启用transpileOnly选项对我们有用。

{ test: /\.ts$/i, loader: 'awesome-typescript-loader', exclude: nodeModulesDir, options: { transpileOnly: true } },

可能对您来说有点晚，但可能会帮助其他人。

为什么Karma忽略了我的typings.d.ts？

1 个答案: