Question

我有一些课程应该是npm包（名称：技术雷达）。但是包的用户通常只需要一个类的npm包（Radar类）。

如果我从技术雷达导入Radar类并尝试创建此类的实例，则会收到错误Object doesn't support this action。

我不确定是在导出类还是导入类时。我正在使用webpack for bundeling和babel来支持ES6。

Radar.js

import ArgumentError from './ArgumentError';
import RadarRenderingEngine from './RadarRenderingEngine';
import Options from './Options';

export default class Radar { /* CONTENT HERE */ }

所有其他类（ArgumentError，RadarRenderingEngine和Options）也使用export default class。这是对的吗？

这是我的webpack.config.js

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
    entry: "./src/Radar.js",
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'technology-radar.js'
    },
    module: {
        loaders: [
            {
                loader: 'babel-loader',
                include: [
                    path.resolve(__dirname, "src")
                ],
                test: /\.js$/
            }
        ]
    },
    plugins: [],
    devtool: "#source-map"
};

webpack配置是否正确？

现在我想在客户端/测试应用程序中导入包。

的package.json

{
  "name": "mytest",
  "version": "1.0.0",
  "main": "webpack.config.js",
  "scripts": {
    "build": "webpack --color",
    "start": "webpack-dev-server"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.0",
    "babel-preset-es2015": "^6.24.1",
    "webpack": "^3.5.6",
    "webpack-dev-server": "^2.4.5",
    "babel-polyfill": "^6.26.0",
    "html-webpack-plugin": "^2.28.0"
  },
  "dependencies": {
    "babel-polyfill": "^6.26.0",
    "technology-radar": "^1.0.8"
  }
}

我想使用雷达的文件：

import Radar from 'technology-radar';

var radar = new Radar();
radar.render();

编辑：

这是技术雷达包的package.json：

{
  "name": "technology-radar",
  "version": "1.0.8",
  "description": "This techradar has the goal that each company/department can create its own visualization of the trends to be focused on. To maintain the content of the techradar this one provides the possibility to dynamically add and edit the blips on the radar.",
  "main": "./dist/technology-radar.js",
  "scripts": {
    "build": "webpack",
    "start": "webpack-dev-server"
  },
  "keywords": [
    "techradar",
    "d3.js"
  ],
  "author": "Raman Singh",
  "license": "MIT",
  "homepage": "https://github.com/raman-nbg/techradar",
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.0",
    "babel-preset-es2015": "^6.24.1",
    "webpack": "^3.5.6",
    "webpack-dev-server": "^2.4.5",
    "babel-polyfill": "^6.26.0",
    "html-webpack-plugin": "^2.28.0"
  },
  "dependencies": {
    "d3": "3.5.17"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/raman-nbg/techradar.git"
  },
  "files": [
    "dist/",
    "src/"
  ]
}

如何导出ES6类？

0 个答案: