gulp browserify 定义一个js为指定入口？压缩后js文件顺序不是按引入顺序？

Question

gulp browserify 定义一个js为指定入口？压缩后js文件顺序不是按引入顺序？
main.js是入口文件，里面引入了

import { A } from './A';
import "./B";

现在B中使用了A定义的方法，但是一直提示这个方法XXXX is not defined?应该怎么修改？

A文件是

export function A() {
    console.log("AAAAAAA");
}

B 文件是

A();

gulp 压缩后的文件是

!function u(i,f,c){function s(e,r){if(!f[e]){if(!i[e]){var t="function"==typeof require&&require;if(!r&&t)return t(e,!0);if(A)return A(e,!0);var n=new Error("Cannot find module '"+e+"'");throw n.code="MODULE_NOT_FOUND",n}var o=f[e]={exports:{}};i[e][0].call(o.exports,function(r){return s(i[e][1][r]||r)},o,o.exports,u,i,f,c)}return f[e].exports}for(var A="function"==typeof require&&require,r=0;r<c.length;r++)s(c[r]);return s}({1:[function(r,e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.A=function(){console.log("AAAAAAA")}},{}],2:[function(r,e,t){"use strict";A()},{}],3:[function(r,e,t){"use strict";r("./A");r("./B")},{"./A":1,"./B":2}]},{},[3]);

报错提示 A is not defined

这个是配置文件

const gulp = require('gulp');//引入gulp  
const htmlMin = require('gulp-htmlmin');//引入html压缩模块  
const autoprefixer = require('gulp-autoprefixer');
const cleanCss = require('gulp-clean-css') //引入css压缩模块
const browserify = require('browserify');
const babelify = require('babelify');
const source = require('vinyl-source-stream');
const buffer = require('vinyl-buffer');
const babel = require('gulp-babel'), //引入es6转es5模块
    uglify = require('gulp-uglify') //引入js压缩模块
const connect = require('gulp-connect');
const webserver = require('gulp-webserver');
const proxy = require('http-proxy-middleware');
const sass = require('gulp-sass')(require('sass'));

const path = {
    html: {
        src: 'src/**/*.html',
        dest: 'dist'
    },
    css: {
        src: 'src/**/*.css',
        dest: 'dist'
    },
    js: {
        entries: 'src/assets/js/main.js',
        output: './assets/js/main.js',
        src: 'src/**/*.js',
        dest: 'dist'
    },
    scss: {
        src: 'src/**/*.scss',
        dest: 'dist'
    }
}

/** 
 * 创建任务，并命名任务名
 * 一个*表示所有文件，两个*表示所有目录
 */
const htmlCompress = () => {
    return gulp.src(path.html.src)
        .pipe(htmlMin({
            removeComments: true,//清除HTML注释
            collapseWhitespace: true,//压缩HTML
            collapseBooleanAttributes: true,//压缩布尔属性的值
            removeEmptyAttributes: true,//删除所有空格作属性值
            removeScriptTypeAttributes: false,//删除<script>的type="text/javascript"
            removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"  
            minifyJS: true,//压缩页面JS
            minifyCSS: true //压缩页面css
        })).pipe(gulp.dest(path.html.dest)) //指定压缩文件放置的目录 
}

const scssCompile = () => {
    return gulp.src(path.scss.src)
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest(path.scss.dest));
}
const cssCompress = () => {
    return gulp.src(path.css.src)
        .pipe(autoprefixer({
            cascade: false
        }))
        .pipe(cleanCss())
        .pipe(gulp.dest(path.css.dest))
}

const jsCompress = () => {
    // return gulp.src(path.js.src)
    //     .pipe(babel({
    //         presets: ['@babel/env'] //es6转es5
    //     }))
    //     .pipe(uglify()) //执行压缩
    //     .pipe(gulp.dest(path.js.dest))
    return browserify({
        entries: path.js.entries, // 入口文件路径
        debug: true
    })
        .transform(babelify, {
            presets: ['@babel/preset-env']
        })
        .bundle()
        .pipe(source(path.js.output))
        .pipe(buffer())
        .pipe(uglify())
        .pipe(gulp.dest(path.js.dest));
}

const watch = () => {//监听文件，文件改变执行对应的任务
    gulp.watch(path.html.src, htmlCompress)
    gulp.watch(path.scss.src, scssCompile)
    gulp.watch(path.html.src, cssCompress)
    gulp.watch(path.js.src, jsCompress)
}

// const server = () => {
//     // 创建服务器
//     connect.server({
//         root: 'dist',//根目录
//         port: '2000',//端口号  
//         livereload: true //服务器热更新
//     })
// }

const createServer = () => {
    return gulp.src('./dist')
        .pipe(webserver({ //创建服务器
            port: '3000', //端口号
            host: '172.16.108.106',
            open: '/dark-rankings.html', //默认打开路径
            livereload: true, //热更新
            middleware: [
                proxy.createProxyMiddleware('/api', { //创建反向代理，请求已 /api 开头就使用target的服务器
                    target: 'http://172.16.108.106',
                    changeOrigin: true
                })
            ]
        })).pipe(connect.reload())
}

/* 以对象形式导出 */
/* 同时运行多个任务 */
module.exports.default = gulp.series(gulp.parallel(htmlCompress, scssCompile, cssCompress, jsCompress, watch, createServer));

Answer 1

你的A模块里，你这样导出你的方法：

export function yourMethod() {
  // your code here
}

然后在你的B模块里导入这个方法：

// B.js
import { yourMethod } from './A';