连接和缩小后如何使用 require js 文件

Question

我在我的项目中使用 requirejs，每个模块都有一个 js 文件，使用 require 调用来利用 libraries/components。以下是示例代码：-

require(["modernizr",
"jquery",
"bootstrap",
"handlebars",
"bootstrap-table",
], function(modernizr, $, bootstrap, Handlebars, bootstrapTable) {

$(document).on('click', '#searchBtn', function(e){
    search();
});

$('#table').bootstrapTable({
    classes: 'table table-no-bordered',
    striped: true,
    iconsPrefix: 'fa',
    responsive: true,
    responsiveBreakPoint: 768,
    responsiveClass: "bootstrap-table-cardview",
    undefinedText: "",
    showFooter: true,
    columns: columns(),
    data: data(),
});
}

我想在页面加载时尽量减少浏览器中的 js 调用次数。

（我知道 r.js 但我想避免它，因为它需要我更改我的项目文件夹结构）

所以我正在考虑使用 grunt 连接和缩小所有 library/component js 文件，如 jquery、bootstrap 等，然后在模块特定文件中要求它们。

如果我这样做，我想知道如何使用 require 包含相同的内容并能够像我一样使用 jquery($) 和 bootstrapTable现在在用吗？

我尝试了以下方法，但似乎不起作用:-

require(["mainjs"], function(mainjs) {

mainjs(document).on('click', '#searchBtn', function(e){
    search();
});

mainjs('#table').mainjs({
    classes: 'table table-no-bordered',
    striped: true,
    iconsPrefix: 'fa',
    responsive: true,
    responsiveBreakPoint: 768,
    responsiveClass: "bootstrap-table-cardview",
    undefinedText: "",
    showFooter: true,
    columns: columns(),
    data: data(),
});
}

以下是我的项目结构：-

my-proj
build
src
    app
        components
            selectpicker
                selectpicker.hbs
                selectpicker.js
                selectpicker.less
            calendar
                calendar.hbs
                calendar.js
                calendar.less
            ...
            ...
            ...
        page
            homepage
                homepage.html
                homepage.js
            transacations
                transactions.html
                transactions.js
            ...
            ...
            ...
    assets
        images
        js
            jquery.js
            modernizr.js
            handlebar.js
            require.js
            bootstrap.js
            moment.js
            ...
            ...
            ...
        less
Gruntfile.js
package.json

Answer 1

您可以使用 webpack:

创建文件webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
};

和你的代码文件 src/index.js :

const modernizr = require("modernizr");
const $ = require("jquery");
const bootstrap = require("bootstrap");
const Handlebars= require("handlebars");
const bootstrapTable = require("bootstrap-table");

$(document).on('click', '#searchBtn', function(e){
    search();
});

$('#table').bootstrapTable({
    classes: 'table table-no-bordered',
    striped: true,
    iconsPrefix: 'fa',
    responsive: true,
    responsiveBreakPoint: 768,
    responsiveClass: "bootstrap-table-cardview",
    undefinedText: "",
    showFooter: true,
    columns: columns(),
    data: data(),
});

然后运行你的项目目录下的命令行程序webpack。这将创建一个名为 dist/bundle.js 的文件，其中包括您的项目代码以及一个文件中所有使用的库。

您还可以使用以下配置告诉 webpack 缩小整个代码。这也将缩小目标文件中所有使用的依赖项。

const webpack = require("webpack");
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  // ...
  optimization: {
    minimize: true,
    minimizer: new UglifyJsPlugin({
      include: /\.min\.js$/
    })
  }
};

Answer 2

您可以使用 webpack、parceljs 或 Browserify 将模块打包到一个 .js 文件中。

连接和缩小后如何使用 require js 文件

How can I use require js files after concatenating and minifying

javascript

requirejs

almond

r.js

grunt-requirejs