将 javascript 个文件拆分成几个文件

Question

我正在使用 JS 在我的 Web 应用程序中实现各种功能。到目前为止，我使用了一个文件 (main.js)，它变得越来越大而且很乱。我想将此文件 "split" 分成几个文件（例如 a.js、b.js 和 c.js），然后将它们导入 main.js。这样我的开发就会整洁干净，在 html 方面，我只需要引用一个 js 文件。

有没有比使用 import 和 export 语句更好的方法来做到这一点？

是否有某种类似于 SASS 的 "preprocessor"，它将 _partialA.scss、_partialB.scss、_partialC.scss 组合成 main.scss？

感谢您的帮助！

Answer 1

您可以使用 ES6 导入并使用 webpack 捆绑您的代码。

Answer 2

我对webpack不是很满意，所以我自己写了一个小脚本。随意使用它。

它将执行以下操作：

观看源路径中定义的文件夹。
如果它检测到源文件夹中的任何文件发生变化，它将读取源文件夹中的所有文件并将它们写入 destination.js 文件

要执行，只需运行节点scriptname.js

/* jshint esversion: 6 */
'use strict';

const watch = require('node-watch');
let allFilesPath = [];
const pathDestination = './path/to/destination.js';
const source = 'source/folder/';

const fs = require('fs');
init();

function init() {
    fs.truncate(pathDestination, 0, function() {
        console.log('delete everything in', pathDestination);
    });

    const allFiles = fs.readdirSync(source);
    allFiles.forEach(function(element) {
        allFilesPath.push(source + element);
    });
    allFiles.forEach(function(element) {
        getFileContent(element);
    });
}

function getFileContent(file) {
    fs.readFile(source + file, 'utf8', function(err, data) {
        if (err) {
            return console.log(err);
        } else {
            console.log(source + file + ' was added to ' + pathDestination);
            addToBundle(data);
        }
    });
}

function addToBundle(code) {
    fs.appendFile(pathDestination, code, function(err) {
        if (err) {
            console.log(err);
        }
    });
}

watch(allFilesPath, function(evt, filename) {
    console.log(filename, 'changed');
    init();
    console.log();
});

将 javascript 个文件拆分成几个文件

Split javascript file into several files

javascript

import

export

sass