Question

我有一个init.js文件，该文件具有一些逻辑，并且 HTML导入将form.html或app.html附加到主文件。这是为了节省性能时间并仅加载当时所需的代码块。如果需要，我可以发布代码来说明这一点。

根据init.js加载的HTML导入，我加载了一个伴随脚本。因此，例如，如果加载了form.html，那么我也将加载form.js。

我正在使用Browserify + Babelify将脚本从ES6转换为ES5，并至少创建3个捆绑软件：init.js，form.js和app.js。

这是我当前的Gruntfile.js，在这里我将Browserify配置为使用Babelify转换并设置src-dest映射：

module.exports = function(grunt) {

    require("load-grunt-tasks")(grunt);

    grunt.initConfig({

        browserify: {
            init: {
                src: 'src/scripts/init.js',
                dest: 'dist/scripts/init.js'
            },
            form: {
                src: 'src/scripts/form.js',
                dest: 'dist/scripts/form.js'
            },
            options: {
                transform: [
                    ['babelify', {
                        "global": true,
                        presets: [
                            ["es2015"]
                        ]
                    }]
            ],
            browserifyOptions: {
                debug: true,
                    sourceType: 'unambiguous'
                }
            }
        }

    });

    grunt.registerTask('default', ['browserify']);
}

我的初始化脚本使用ES6导入/导出并导出userData以在form.js中使用：

'use strict';

export let userData = null;

(function() {

    // do some stuff and assign value to userData

})();

导入form.html时，form.js从userData加载和导入init.js：

// form.js

import {userData} from './init';

问题在于，userData不仅导入form.js，还导入了整个init.js并将其捆绑在一起，所以当我只需要一个命名变量时，我最终无意中导入了整个脚本。

我尝试切换gruntfile的任务选项中的global: true选项，并尝试了各种导入/导出语法。

为了准确起见，我还在主文件index.html的头部中使用了一些polyfill来获取Web组件，HTML导入和Browserify的require语法，以使代码在Chrome之外的浏览器中都能正常工作。

//index.html
<head>
    <script type="text/javascript" src="src/scripts/helper/webcomponents-loader.js"></script>
    <script type="text/javascript" src="src/scripts/helper/html-imports.min.js"></script>
    <script src="node_modules/requirejs/require.js"></script>
</head>
<body>
   <script src="dist/scripts/init.js"></script>
</body>

我是不熟悉Babelify，Browserify和ES6模块语法的人，但是也许我无法实现一个option配置。

我可能还缺少基本信息或在核心级别上做错了事。

我只是无法理解或解决为什么为什么当我尝试导入单个命名模块时最终导入整个脚本。

我想念什么吗？

Grunt + Browserify + Babelify要求/导入不遵守单个命名的导出，而是导入整个模块

0 个答案: