寻找一个插件来更快，更容易地使用所有js文件

Question

我在我的项目中使用多个js文件。所以，我正在寻找一个插件，我可以引用任何js文件fast and easy（不需要在后台安装任何编译器）。

这是一个角落：

通常，每次我需要使用它时：

<script src="/path/app1.js"></script>
<script src="/path/app2.js"></script>
<script src="/path/app3.js"></script>
<script src="/path/app4.js"></script>
<script src="/path/app5.js"></script>
<script src="/path/app6.js"></script>
<script src="/path/app7.js"></script>
<script src="/path/app8.js"></script>
<script src="/path/app9.js"></script>
<script src="/path/app10.js"></script>
<!-- ... -->

太可怕了^^！

然后，我尝试使用谷歌搜索并找到requirejs。但我根本不会faster使用，因为我需要为每个js文件（对象名和js路径）配置：

requirejs.config({
    baseUrl: 'js/lib',
    paths: {
        app1: 'app1-1.1.0',
        app2: 'app2-1.1.0',
        app3: 'app3-1.1.0',
        app4: 'app4-1.1.0',
        app5: 'app5-1.1.0',
        app6: 'app6-1.1.0',
        app7: 'app7-1.1.0',
        app8: 'app8-1.1.0',
        app9: 'app9-1.1.0',
        app10: 'app10-1.1.0'
        // ...
    }
});

那么，如果我有超过50个js文件会发生什么？我必须为50个文件定义50个对象。升级到新版本后，我必须在配置中编辑文件名... blabla

然后，我试图再次搜索并找到另一种方式。使用import and export keywords。但它需要后台编译器，而不是标准语法。

我正在寻找这样的插件：

// window.Animal is 'undefined' here

using('Animal'); // using is a global function while 'Animal' is a parameter

// window.Animal is an object here

class Cat extends Animal {
    constructor(name) {
        this.name = name;
    }
    Speak() {
        return 'meow meow';
    }
};

有这样的插件吗？谢谢！

Answer 1

  

我在我的项目中使用多个js文件。所以，我正在寻找一个插件，我可以快速简单地引用任何js文件（无需在后台安装任何编译器）。

考虑使用模块捆绑器，例如Webpack或Browserify。或多或少执行相同的功能，这两个软件包捆绑包将允许您在代码中使用CommonJS模块，例如var package = require('package')。当您通过webpack直接运行“捆绑”任务时，或者在浏览器化的情况下通过gulp或grunt运行。相应的捆绑包将从您提供的某个入口点文件开始，并自动创建一个“bundle.js”，您可以按如下方式<script src="/path/bundle.js"></script>创建。

这是一个很好的起点 - ＆gt; Webpack Tutorial

Answer 2

我编写了一个简单的函数来从目录的文件中生成代码片段。修改后的版本：

var fs = require('fs');

function getPathScripts(path) {
    var fnames,
        scripts;

    fnames = fs.readdirSync(path);

    console.log(fnames);
    // [ 'app1.js', 'app2.js', 'app3.css' ]

    scripts = fnames
        .filter(function (fname) {
            return fname.match(/.js$/); // add your filter condition
        })
        .map(function (fname) {
            return `<script src="${ path }/${ fname }"></script>`
        }).join('\n');

    console.log(scripts);
    //<script src="./path/app1.js"></script>
    //<script src="./path/app2.js"></script>

    return scripts;
}

var output = getPathScripts('./path');

fs.writeFileSync('output.js', output); // write content to a file