用webpack打包在typescript中编写的angularjs库

时间:2018-03-29 16:29:39

标签: angularjs typescript webpack

我有一个用Typescript编写的angularjs模块,它包含一组组件。我需要将此库捆绑到一个文件中,该文件可以被其他角度应用程序使用。

这是webpack.config的输出部分。

 entry: './mylib.module.ts',
 output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'my-lib.js',
    library: 'mylib',
    libraryTarget: 'umd'
  },

当我包括这个" my-lib.js"在另一个angularjs项目中,angular无法找到我的模块,就好像它根本没有加载一样。

以下是我需要使用该模块的方法:

<script src="https://example.com/my-lib.js"></script>
<script>
   angular.module('myApp', ['myLib']);
   angular.bootstrap(document, ['myApp']);
</script>

以下是生成的lib文件的前几行:

(function webpackUniversalModuleDefinition(root, factory) {
    if(typeof exports === 'object' && typeof module === 'object')
        module.exports = factory(require("angular"), require("angular-translate"), require("angular-translate-loader-static-files"));
    else if(typeof define === 'function' && define.amd)
        define(["angular", "angular-translate", "angular-translate-loader-static-files"], factory);
    else if(typeof exports === 'object')
        exports["fnc"] = factory(require("angular"), require("angular-translate"), require("angular-translate-loader-static-files"));
    else
        root["fnc"] = factory(root["angular"], root["angular-translate"], root["angular-translate-loader-static-files"]);
})(this, function(__WEBPACK_EXTERNAL_MODULE_0__, __WEBPACK_EXTERNAL_MODULE_6__, __WEBPACK_EXTERNAL_MODULE_7__) {
return /******/ (function(modules) { // webpackBootstrap........

如何做到这一点?

0 个答案:

没有答案