Question

我正在使用JS在我的Web应用程序中实现各种功能。到目前为止，我使用了一个文件（main.js），这个文件变得非常庞大和混乱。我想将此文件“拆分”为多个文件（例如a.js，b.js和c.js），然后将其导入main.js。这样我的开发将是整洁和干净的，在HTML方面，我只需要引用一个js文件。

有没有比使用import和导出语句更好的方法呢？

在SASS中是否存在某种“预处理器”，它会将_partialA.scss，_partialB.scss，_partialC.scss合并到main.scss中？

感谢您的帮助！

Answer 1

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

Answer 2

我对webpack并不完全满意，所以我写了自己的小脚本。随意使用它。

它将执行以下操作：

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

要执行，只需运行node 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文件拆分为多个文件

2 个答案: