打包 JS 文件（webpack）

Question

用webpack选哪个：

import $ from 'jquery';

或

var $ = require('jquery');

以及如何导入或要求没有任何内容可导出的文件（仅帮助函数）？

使用require('jquery');方法时var $ =也是必须的吗？

Answer 1

取决于您是否使用 babel-loader。

如果你不想用 ECMA6+/JSX 语法编写，你 browser-safe 可以使用旧的 CommonJS/node.js require('jquery'); 语法。

如果您想要支持更新的语法，例如 ECMA6、ECMAscript-2015、ECMA7、JSX 等，您可能想要使用 babel-loader 和 ECMA6 import syntax。小心 import default vs named vs alias vs wildcard import 虽然，你可能想使用语法：

import {jQuery as $} from 'jquery';

或

import $ from 'jquery';

有关导入方法的更多信息 jquery 。

如果你不想从模块中导入任何特定名称（例如，如果你导入 jQuery 只是为了让它自己添加到全局 window.jQuery = window.$），你可以只说 import 'jquery';.

要在 webpack 中启用 babel-loader，请使用如下配置：

webpack.config.js

  {
    entry: 'app.js',
    output: {
      path: path.join(__dirname, 'dist'),
      publicPath: publicPath,
      filename: outputFilename
    },
    resolve: {
      modules: [path.join(__dirname, 'src'), path.join(__dirname, 'node_modules')]
    },
    plugins: [
      new webpack.ProvidePlugin({ 
        $: 'jquery', 
        jQuery: 'jquery'
      })
    ],
    module: {
      rules: [
        {
          test: /\.jsx?$/,
          loader: 'babel-loader',
          exclude: /node_modules/,
          query: {
            presets: ['es2015', 'react'],
            plugins: ['transform-es2015-destructuring', 'transform-object-rest-spread']
          }
        },
        ...
      ]
    ...
   }
 }

另请注意，您可以使用 webpack ProvidePlugin，就像我在此配置中所做的那样，为期望它作为全局变量可用的模块填充 jQuery。

打包 JS 文件（webpack）

Bundling JS files (webpack)

import

require

webpack