【问题标题】:Angular 2 AoT Rollup fails with 'require is not defined'Angular 2 AoT Rollup 因“未定义要求”而失败
【发布时间】:2017-06-18 04:17:45
【问题描述】:

我有一个 Angular2 应用程序,我正在编译以与 AoT 一起运行。 我已经解决了实际编译时遇到的问题,并且我还能够从头到尾无错误地运行 Rollup(尽管有很多警告,我认为这是意料之中的)。

但是,在运行应用程序时,浏览器总是在我的 app.bundle.js 上声明 require is not defined。

我做错了什么?

这是我的功能性非 AoT 示例代码/配置: https://plnkr.co/edit/oCAaeXUKWGyd34YKgho9?p=info

这是我的功能性 AoT 示例配置,它会引发 require 错误: https://plnkr.co/edit/Y1C5HaQS3ddCBrbRaaoM?p=info

是否有人在这里发现任何错误,尤其是在比较非 AoT system.js 配置和 AoT 汇总配置时? 为什么我会遇到这个错误?

我了解浏览器无法使用 require 但汇总不应该处理这个问题?

最好的问候

【问题讨论】:

  • 出于好奇,您使用的是哪个版本的 Angular 组件?我自己也遇到了这个问题,并没有找到太多东西;我想知道这是否与最近的 2.4.5 版本有关。
  • @joh04667 我个人使用的是 Angular2 2.4.4
  • 另一个问题....您是否尝试过安装 source-map-explorer 并通过 Angular 文档检查您的 build.js?我注意到我的(版本 2.4.5)编译器仍然是包的一部分,它不应该是。
  • @joh04667实际上,我没有。但我会看看它。不知道那个包。 Tks
  • 另外,您的 index.html 是否可以访问 shim.min.js 和 zone.min.js?我看到了脚本标签,但默认情况下它们不会复制到aot/node_modules(或者在你的情况下是app/node_modules)。

标签: javascript angular angular2-aot rollupjs


【解决方案1】:

我对这个问题的解决方案如下:

我跟踪了系统需要什么:模块 fs、events 和 timer。所有这些都在 zone.js 中被引用。

在我之前的尝试中,我发现一些 zone.js 导入被黑进了我的代码,将其缩小到 5M。

我删除它们后,问题就消失了。

对于未来遇到类似问题的谷歌员工:

问题的原因是你的 npm 模块在内部使用了require()。你必须更新它,或者重新编译它,但这次是作为 ES6 包(它不使用require(),它使用import)。如果 require 确实被深度硬编码到其中(例如,它在 .js 中并使用 require),那么您必须修改其源代码。


附加扩展:

看来,汇总 无法正确处理像 import 'Zone.js'; 和类似的非普通导入!它只能处理import { something } from 'Anything';-like 导入!

所有问题的根源在于 Angular 需要以这种方式导入 zonejs,而且任何 typescript 装饰器都需要以这种方式导入的 reflect-metadata 包。

但是,这不是一个真正的问题。事情以前看起来是这样的,就像

<script src="...zone.js"></script>

或者用一个

import 'zone.js';

,不应再存在于源代码(或 HTML)中。相反,您必须在没有它们的情况下编译源代码,然后简单地将它们连接到源代码的开头。就我而言,我使用以下 Grunt 规则:

    concat: {
        dev: {
          src: [ "node_modules/zone.js/dist/zone.js", "node_modules/reflect-metadata/Reflect.js", "target/MyApp-core.js" ],
          dest: "target/MyApp.js"
        }
    },

它是grunt-contrib-concat Grunt 包的一部分。

生成的target/MyApp.js 可以由任何其他工具(uglify,或者最好的是 google 闭包编译器)进一步处理。

【讨论】:

    【解决方案2】:

    所以,最终我能够解决这个问题。

    代码中有一个流氓const _ = require("lodash")。 一旦我删除它,一切都会顺利进行。

    有两点值得一提:

    1. 由于 node.js 的内存限制(1.7GB RAM),ngc 命令使用node --max-old-space-size=8192 ./node_modules/.bin/ngc -p tsconfig-aot.json 运行
    2. 同样,rollup 与node --max-old-space-size=8192 ./node_modules/.bin/rollup -c rollup-config.js 一起运行

    您也许可以不使用--max-old-memory=4096,具体取决于您的项目大小和计算机上的内存。

    至于我的 rollup-config.js,虽然我不确定这里的一切是否真的有必要,但这对我有用:

    import builtins from 'rollup-plugin-node-builtins';
    import nodeResolve from 'rollup-plugin-node-resolve';
    import commonjs from 'rollup-plugin-commonjs';
    import uglify from 'rollup-plugin-uglify';
    
    export default {
        entry: 'app/app.aot.js',
        dest: 'www/bundle.js', // output a single application bundle
        sourceMap: false,
        format: 'iife',
        plugins: [
            nodeResolve({
                jsnext: true,
                module: true,
                browser: true
            }),
            commonjs({
                // non-CommonJS modules will be ignored, but you can also
                // specifically include/exclude files
                include: [
                    'node_modules/**',
                    'node_modules/primeng/**',
                    'node_modules/moment/**',
                    'node_modules/rxjs/**',
                    'node_modules/lodash/**'
                ], // Default: undefined
                exclude: ['node_modules/ws/**'], // Default: undefined
    
                // search for files other than .js files (must already
                // be transpiled by a previous plugin!)
                extensions: ['.js'], // Default: [ '.js' ]
    
                // if true then uses of `global` won't be dealt with by this plugin
                ignoreGlobal: false, // Default: false
    
                namedExports: {
                    // left-hand side can be an absolute path, a path
                    // relative to the current directory, or the name
                    // of a module in node_modules
                    'node_modules/primeng/primeng.js': [
                        'PanelModule',
                        'InputSwitchModule',
                        'InputMaskModule',
                        'ProgressBarModule',
                        'DropdownModule',
                        'CalendarModule',
                        'InputTextModule',
                        'DataTableModule',
                        'DataListModule',
                        'ButtonModule',
                        'DialogModule',
                        'AccordionModule',
                        'RadioButtonModule',
                        'ToggleButtonModule',
                        'CheckboxModule',
                        'SplitButtonModule',
                        'ToolbarModule',
                        'SelectButtonModule',
                        'OverlayPanelModule',
                        'TieredMenuModule',
                        'GrowlModule',
                        'ChartModule',
                        'Checkbox',
                        'Dropdown',
                        'Calendar',
                        'DataGridModule',
                        'DataTable',
                        'MultiSelectModule',
                        'TooltipModule',
                        'FileUploadModule',
                        'TabViewModule',
                        'AutoCompleteModule'
                    ],
                    'node_modules/ng2-uploader/index.js': ['Ng2Uploader']
                },
    
                // if false then skip sourceMap generation for CommonJS modules
                sourceMap: false, // Default: true
            }),
            builtins(),
            uglify()
        ]
    }
    

    rollup 仍然抱怨某些包的默认导入,这可能可以使用命名导出来解决(如果你真的想的话),但即使有这些警告,一切似乎都在运行。

    至于我的“最终”tsconfig.json:

    {
        "compilerOptions": {
            "lib": ["es2015", "dom"],
            "target": "es5",
            "module": "es2015",
            "moduleResolution": "node",
            "declaration": false,
            "sourceMap": true,
            "emitDecoratorMetadata": true,
            "experimentalDecorators": true,
            "removeComments": true,
            "noImplicitAny": false,
            "watch": false,
            "skipLibCheck": true,
            "allowSyntheticDefaultImports": true,
            "suppressImplicitAnyIndexErrors": true,
            "baseUrl": ".",
            "typeRoots": [
                "./node_modules/@types",
                "./node_modules"
            ],
            "types": [
                "node",
                "lodash",
                "jasmine",
                "bluebird",
                "socket.io-client"
            ]
        },
        "compileOnSave": false,
        "buildOnSave": false,
        "files": [
            "app/app.module.ts",
            "app/app.aot.ts"
        ],
        // "exclude": [
        //  "node_modules"
    
            // ],
            "angularCompilerOptions": {
                "genDir": "compiled",
                "skipMetadataEmit": true
            }
    }
    

    最后,这两个链接也有助于理解幕后发生的事情:

    希望这对某人有所帮助。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2018-04-24
      • 1970-01-01
      • 2018-03-23
      • 2017-03-10
      • 2020-12-14
      • 2017-07-27
      • 2021-10-08
      • 1970-01-01
      相关资源
      最近更新 更多