如何使用Typescript ES6编写npm包?

时间:2016-10-11 17:23:17

标签: typescript webpack babeljs

我正在使用Typescript + Webpack + Babel开发一个包(项目A)但是我不能在另一个项目(项目B)中使用这个包。我得到“MyClass不是构造函数”错误。

我无法解决这个问题。请帮我解决这个问题。我的配置文件如下

项目A

index.ts

export {Engine} from './Engine'

tsconfig.json

{
    "compilerOptions": {
        "outDir": "./dist/",
        "sourceMap": true,
        "noImplicitAny": false,
        "module": "commonjs",
        "target": "es6",
        "removeComments": false,
        "jsx": "react",
        "noLib": false,
        "preserveConstEnums": true,
        "declaration": true,
        "suppressImplicitAnyIndexErrors": true,
        "allowSyntheticDefaultImports": true
    },
    "exclude":["node_modules", "dist"]
}

webpack.config.js

const webpack = require('webpack')
const path = require("path");

module.exports = {
  entry: {
    app: ['./source/index.ts']
  },
  output: {
    filename: './dist/index.js'
  },
  devtool: 'source-map',
  resolve: {
    extensions: ['', '.webpack.js', '.web.js', '.ts', '.js']
  },
  devServer: {
    contentBase: ".",
    host: "localhost",
    port: 9000
  },
  target: 'node',
  module: {
    loaders: [
      { test: /\.json$/, loader: 'json' },
      {
        test: /\.ts$/,
        exclude: /(node_modules|bower_components|dist)/,
        loader: 'babel-loader!ts-loader'
      }
    ]
  }
}

.babelrc

{
  "presets": ["es2015"],
  "plugins": ["babel-plugin-transform-runtime"]
}

项目B

index.ts

import * as Eagle from 'eagle-engine';

window.onload = function (){

    console.log(Eagle);

    var engine = new Eagle.Engine(
    {
        containerId: "scenecontainer",
        debugMode: true,
    });

};

webpack.config.js

const webpack = require('webpack')
module.exports = {
  entry: [ './source/index.ts' ],
  output: {
    filename: './dist/eagle-engine-test.js'
  },
  devtool: 'source-map',
  resolve: {
    extensions: ['', '.webpack.js', '.web.js', '.ts', '.js','.json']
  },
  devServer:{
    contentBase:".",
    host:"localhost",
    port: 9000
  },
  module: {

    loaders: [
      { test: /\.json$/, loader: 'json' },
      {
        test: /\.ts$/,
        exclude: /node_modules/,
        loader: 'ts-loader'
      }
    ]
  }
}

0 个答案:

没有答案