使用webpack 2和typescript

时间:2017-02-15 13:59:24

标签: typescript webpack typescript-typings ts-loader jquery-globalize

我正在尝试在TypeScript项目中使用Globalize librarywebpack 2。 typescript / Webpack 2设置已经可以正常工作,但是,在导入和访问Globalize时,运行webpack时收到以下错误消息:

ERROR in ./.tmp-globalize-webpack/C--Projects-webpack2-testing-app-index.ts
(1,1): error TS2304: Cannot find name 'module'.

ERROR in ./app/index.ts
(2,23): error TS7016: Could not find a declaration file for module 'globalize'. 'C:\Projects\webpack2-testing\node_modules\globalize\dist\node-main.js' implicitly has an 'any' type.

所以我尝试安装全局化类型:

npm install --save-dev @types/globalize

现在我收到以下错误:

ERROR in ./.tmp-globalize-webpack/C--Projects-webpack2-testing-app-index.ts
(1,1): error TS2304: Cannot find name 'module'.

ERROR in ./app/index.ts
(2,23): error TS2306: File 'C:/Projects/webpack2-testing/node_modules/@types/globalize/index.d.ts' is not a module.

不幸的是,这对我来说都是新鲜事。不知道我是否应该检查webpack或打字或全球化或打字......

这是我的package.json:

{
"name": "webpack2-testing",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack-config.js"
  },
  "devDependencies": {
    "cldr-data": "^30.0.4",
    "globalize": "^1.2.2",
    "globalize-webpack-plugin": "^0.3.10",
    "html-webpack-plugin": "^2.28.0",
    "ts-loader": "^2.0.0",
    "typescript": "^2.1.6",
    "webpack": "^2.2.1"
  }
}

和index.ts:

import Globalize from "globalize";

function component () {
  let element = document.createElement('div');

  let currencyFormatter = Globalize.currencyFormatter( "USD" );
  element.innerHTML = currencyFormatter( 69900 );
  return element;
}

document.body.appendChild(component());

完整的项目文件(包括webpack-config)可在this github repository获得。

注意:尝试解决question I asked previously时出现了这个问题。如果这样做,它也可以解决我之前的问题。

1 个答案:

答案 0 :(得分:1)

我终于开始工作了:

  1. globalize.d.ts文件中:

     declare module 'globalize' {
         export = Globalize;
     }
    
  2. 在您的webpack配置中:

    plugins: [
        new webpack.ProvidePlugin({
            Globalize: "globalize"
        })
    ]
    
  3. 最后,当您在所有globalize个文件中导入.ts时:

    import * as Globalize from 'globalize';