我正在尝试使用 Globalize library与 webpack 2在 TypeScript 项目中。 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 或打字或全局化或 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)可在 this github repository 获取。 .
注意:这个问题是在尝试解决 question I asked previously 时出现的。 。如果这有效,它也可以解决我之前的问题。
最佳答案
我按照以下步骤在 typescript 项目中使用 globalize.js。
1. 安装库
npm install globalize
npm install @types/globalize
2. 创建文件以导出模块 (全局化.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。它确实有效。
- 添加 globalize-webpack-plugin https://github.com/rxaviers/globalize-webpack-plugin
并在 webpack.config.js 中使用,如此处演示所示。 https://github.com/globalizejs/globalize/tree/master/examples/app-npm-webpack
- 安装cldr-data库,因为这个问题 https://github.com/globalizejs/globalize/issues/548
我必须使用安装
npm install globalize cldr-data
回到浏览器,一切正常。
关于typescript - 将 globalize 与 webpack 2 和 typescript 结合使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42251426/