Question

好的，不要用它来将脚本加载到浏览器中：

const script = document.createElement('script');

script.onload = function () {
  alert('loaded script successfully');
};

script.onerror = function (e) {
  alert('error loading script:' + e);
};

script.src = url;
document.head.appendChild(script);

我想改用这种方法：

import {plugins} from './my-plugins';

fetch('https://cdnjs.cloudflare.com/ajax/libs/xxx.js')
.then(function (result) {
  return result.text();
})
.then(function (result) {
  const Foo = eval(String(result));
  plugins.push(Foo);                       // add plugin to an array
})
.catch(function (err) {
  console.error(err.message);
});

我的问题是 - 如何创建一个TypeScript文件，然后可以将其转换为以这种方式加载到浏览器中的内容。如果可能的话，我想避免使用AMD，Webpack，Browserify等。

假设xxx.ts看起来像这样：

class Foo {
  // i want to return this class/constructor from the eval() call

}

换句话说 - 如何将Foo类转换为某种情况，当你eval()它时，被证实的代码将返回该构造函数？

希望你能理解这个问题。

我希望tsc可以某种方式将该类转换为可以加载上述方法的内容。

Answer 1

看起来最好的办法是使用Webpack构建文件，我的webpack.config.js文件如下所示：

const path = require('path');

module.exports = {
  entry: './src/index.ts',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'plugin.js',
    library: 'suman-plugin',
    libraryTarget: 'var'
  },
  resolve: {
    extensions: ['.js']
  }
};

此.ts文件的输出：

export class Foo {

}

看起来像这样：

var suman-plugin =
/******/ (function(modules) { // webpackBootstrap
/******/    // The module cache
/******/    var installedModules = {};

/******/    // The require function
/******/    function __webpack_require__(moduleId) {

                // ...

/******/        // 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, __webpack_exports__, __webpack_require__) {

"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });


class Foo {


}

 __webpack_exports__["Foo"] = Foo;


/***/ })
/******/ ]);

然后在前端，我们使用这样的东西：

fetchScript()
.then(function (result) {
  const Foo = eval(`
   (function(){

      ${String(result)}

      return suman-plugin;

   })()`
 `);

  plugins.push(Foo);                       // add plugin to an array
})

将TypeScript模块加载到浏览器中，自动换行模块

1 个答案: