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

Question

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

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 连接和缩小所有库/组件 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 文件中。