Question

我想在用TypeScript编写的Angular2应用程序中使用XRegExp库。

我已将XRegExp安装为node.js模块。

如何让var unicodeWord = XRegExp("^\\pL+$");使用组件方法？

（如何在TypeScript中引用JS库？如何以角度加载node.js模块？）

更新

typings.json：

{
    "ambientDependencies": {
        "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#6697d6f7dadbf5773cb40ecda35a76027e0783b2",
        "jasmine": "github:DefinitelyTyped/DefinitelyTyped/jasmine/jasmine.d.ts#d594ef506d1efe2fea15f8f39099d19b39436b71",
        "xregexp": "github:DefinitelyTyped/DefinitelyTyped/xregexp/xregexp.d.ts"
    }
}

我的index.html中的

<head>标记：

<head>
    <title>Amadeus</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">    

    <!-- 1. Load libraries -->
    <!-- IE required polyfills, in this exact order -->
    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>

    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.js"></script>

    <!-- 2. Configure SystemJS -->
    <script>
        System.config({
            paths: {
                xregexp: 'node_modules/xregexp/src/xregexp.js'
            },
            packages: {        
                angular_components: {
                    format: 'register',
                    defaultExtension: 'js'
                }
            }
        });

        System.import('angular_components/ignition')
            .then(null, console.error.bind(console));
    </script>

</head>

ignition.ts：

import {bootstrap}    from 'angular2/platform/browser'
import {AmadeusComponent} from './amadeus/amadeus.component'

bootstrap(AmadeusComponent);

amadeus.component.ts：

import {Component} from 'angular2/core';
import {XRegExp} from 'xregexp';

@Component({
    selector: 'amadeus',
    templateUrl: 'angular_components/amadeus/amadeus.component.ahtml'
})

export class AmadeusComponent {

    constructor(){
        console.log(XRegExp); // undefined
    }

}

Answer 1

您可以通过以下方式执行此操作：

在你的package.json中添加＆＃39; typings＆＃39;作为dev依赖项，以及（可选）postinstall action：

"devDependencies": 
{
    "typings": "latest"
},
"scripts": 
{
    "postinstall": "typings install --save"
}

将包含以下内容的typings.json文件添加到根文件夹：

{
  "ambientDependencies": {
    "xregexp": "github:DefinitelyTyped/DefinitelyTyped/xregexp/xregexp.d.ts"
  }
}

然后在控制台中导航到你的项目根目录（你的package.json，tsconfig.json等）并运行

npm install

这将获得xregexp库的打字稿定义。

不要忘记使用tsconfig文件中的exclude部分排除浏览器（或主要）定义，如下所示：

{ 
    "compilerOptions": { 
        "emitDecoratorMetadata": true, 
        "experimentalDecorators": true,
        "moduleResolution": "node",
        "module": "commonjs", 
        "target": "es6",
        "sourceMap": true,
        "outDir": "bin",
        "declaration": true
    },
    "exclude": [
        "node_modules",
        "typings/browser.d.ts",
        "typings/browser/**"
    ]
}

在你的systemjs config中：

    System.config({
        paths: {
            xregexp: 'path/to/xregexp.js'
        }             
    });

    System.defaultJSExtensions = true;

然后使用它：

import XRegExp = require('xregexp');

希望这有帮助。

如何在Angular2中加载XRegExp

1 个答案: