2

我正在尝试在 TypeScript 项目中使用带有webpack 2的Globalize 库。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 或 typings 或 globalize 或 typescript ...

这是我的 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）可在此 github 存储库中找到。

注意：这个问题是在尝试解决我之前提出的问题时出现的。如果这可行，它也可以解决我之前的问题。

4

2 回答 2

2

我按照以下步骤在 typescript 项目中使用 globalize.js。

1.安装库

npm install globalize
npm install @types/globalize

2.创建文件导出模块（globalize.d.ts）

/// <reference types='globalize' />

/* tslint:disable */

declare namespace globalize { }
declare module 'globalize' {
    export default Globalize;
}

3.在我的主文件中使用

import globalize from 'globalize';

// Formatter creation.
var formatter = globalize.numberFormatter();

// Formatter execution (roughly 10x faster than above).
formatter( Math.PI );

但是，我从来没有成功下载 cldr lib，所以我的浏览器出现如下错误：

./src/client/index.tsx
(5,23): error TS2306: File '/Users/alen/Workspace/Qunhe/core/node_modules/@types/globalize/index.d.ts' is not a module.
./~/globalize/dist/globalize.js
Module not found: Error: Cannot resolve module 'cldr' in /Users/alen/Workspace/Qunhe/core/node_modules/globalize/dist
@ ./~/globalize/dist/globalize.js 22:2-25:14
./~/globalize/dist/globalize.js

我不确定是 globalize.js 问题还是 cldr.js 问题，仍在尝试。对不起，除了解决你的问题，我早早地回复了。

编辑：

为了解决上面的错误，我使用了webpack插件来帮助我打包数据，并安装了cldr-data。它确实有效。

  1. 添加 globalize-webpack-plugin https://github.com/rxaviers/globalize-webpack-plugin

并在 webpack.config.js 中用作演示说明。 https://github.com/globalizejs/globalize/tree/master/examples/app-npm-webpack

  1. 安装 cldr-data 库，因为这个问题 https://github.com/globalizejs/globalize/issues/548

我必须使用安装

npm install globalize cldr-data

回到浏览器中，一切正常。

在此处输入图像描述

于 2017-02-23T07:26:00.373 回答
2

我终于让它工作了：

  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';
于 2017-07-18T14:15:26.300 回答