Использование globalize с webpack 2 и typescript

Я пытаюсь использовать библиотеку Globalize с 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.

К сожалению, все это для меня очень ново. Не знаю, следует ли мне проверять веб-пакет или типизацию, или глобализировать, или машинописный текст...

Это мой 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.

Примечание. Этот вопрос возник при попытке решить вопрос I. спрашивал ранее. Если это сработает, это также может решить мой предыдущий вопрос.


webpack typescript typescript-typings ts-loader jquery-globalize
person Dominic    schedule 15.02.2017    source источник
comment
1. index.ts не является модулем, см.: typescriptlang.org/docs/handbook /modules.html и 2. Если вы манипулируете DOM, вам, вероятно, следует делать это внутри прослушивателя событий DOMContentLoaded developer.mozilla.org/en/docs/Web/Events/DOMContentLoaded   -  person redconservatory    schedule 16.02.2017

Ответы (2)


arrow_upward
2
arrow_downward

Наконец-то я заработал:

  1. В вашем файле globalize.d.ts:

     declare module 'globalize' {
     export = Globalize;
 }

  2. В конфигурации вашего веб-пакета:

    plugins: [
    new webpack.ProvidePlugin({
        Globalize: "globalize"
    })
]

  3. И, наконец, когда вы импортируете globalize во все ваши .ts файлы:

    import * as Globalize from 'globalize';
person Brice Miclo    schedule 18.07.2017

arrow_upward
1
arrow_downward

Я сделал следующие шаги, чтобы использовать globalize.js в проекте typescript.

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 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

И обратно в браузере все работает хорошо.

введите здесь описание изображения

person Alen Liang    schedule 23.02.2017
comment
Я сделал это: npm install --save-dev @types/globalize (см. вопрос выше). Должен ли я пропустить save-dev? - person Dominic; 24.02.2017
comment
Вы должны использовать npm install --save вместо --save-dev, потому что вы все равно будете использовать эту библиотеку в производстве. Вы можете обратиться сюда stackoverflow.com/questions/22891211/ - person Alen Liang; 27.02.2017
comment
Однако я думаю, что это не проблема, потому что ваша проблема - person Alen Liang; 27.02.2017
comment
Спасибо за подробное объяснение! Приложение теперь компилируется с помощью веб-пакета, однако я получаю сообщение об ошибке Uncaught TypeError: Не удается прочитать свойство «currencyFormatter» неопределенного в браузере. Вы используете веб-пакет 2 или веб-пакет 1? Может быть, у вас есть рабочий проект на github, чтобы я мог сравнить? - person Dominic; 02.03.2017
comment
Я постараюсь сделать демо на github в эти выходные. - person Alen Liang; 03.03.2017
comment
@AlenLiang ты написал ту демонстрационную программу, которую, как ты сказал, напишешь на github? - person adkstar; 01.02.2018