javascript - Webpack typescript import es indefinido
Estoy empaquetando esta clase individual con webpack, sin embargo, cuando la importo en mi proyecto dice que está indefinida. He estado intentando un par de cosas, pero simplemente no lo estoy haciendo bien.
miclase.ts
export class Dyn {
abc: any;
constructor(drawCallback, options?) {
}
text(a){
this.abc = a;
console.log(this.abc);
}
}
ts.config
{
"compilerOptions": {
"outDir": "./src2/js",
"declaration": true,
"baseUrl": "src",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"declarationDir": "./src2/@types",
"sourceMap": false,
"noImplicitAny": false,
"module": "commonjs",
"target": "es5"
},
"include": [
"./src2/**/*"
],
"exclude": [
"node_modules"
]
}
webpack.config.js
module.exports = {
entry: "./src2/myclass.ts",
output: {
filename: "myclass.js",
path: __dirname + "/dist"
},
// Enable sourcemaps for debugging webpack's output.
//devtool: "source-map",
resolve: {
// Add '.ts' and '.tsx' as resolvable extensions.
extensions: [
".ts"
]
},
module: {
loaders: [
// All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
{
test: /\.ts?$/, loader: "awesome-typescript-loader",
exclude: /node_modules/
},
// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
/*{
enforce: "pre", test: /\.js$/, loader: "source-map-loader"
},*/
],
},
// When importing a module whose path matches one of the following, just
// assume a corresponding global variable exists and use that instead.
// This is important because it allows us to avoid bundling all of our
// dependencies, which allows browsers to cache those libraries between builds.
externals: {
},
};
myclass.js (resultado de webpack)
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // identity function for calling harmony imports with the correct context
/******/ __webpack_require__.i = function(value) { return value; };
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, {
/******/ configurable: false,
/******/ enumerable: true,
/******/ get: getter
/******/ });
/******/ }
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var Dyn = (function () {
function Dyn(drawCallback, options) {
}
Dyn.prototype.text = function (a) {
this.abc = a;
console.log(this.abc);
};
return Dyn;
}());
exports.Dyn = Dyn;
/***/ })
/******/ ]);
import { Dyn } from 'myclass'; //<<< indefinido
Respuesta #1
Añadiendo
libraryTarget: "umd"
agregar a la parte de output en webpack.config.js soluciona este problema