使用 webpack 和 gulp 导入 JS 部分答案

【问题标题】：Import JS partials with webpack and gulp使用 webpack 和 gulp 导入 JS 部分
【发布时间】：2018-02-07 18:59:29
【问题描述】：

我不明白以下代码行的工作原理：

var aScriptName = require('./modules/your-script');

我想通过 webpack 使用上面的 require 语句来拆分我的 JS。我不明白的是，当我在脚本文件中多次包含它时，我的部分内容并不总是一致地加载。

我的 JS 文件夹结构如下所示：

-app
---js
-----script.js
-----modules
---------module1.js
---------module2.js
---------module3.js
---------module4.js

考虑到这一点，我想做的是在 script.js 中调用这样的模块：

var 1script = require('./modules/module1');
var 2script = require('./modules/module2');
var 3script = require('./modules/module3');
var 4script = require('./modules/module4');

我的 webpack 的完整副本如下：

var debug = false;
var path = require('path');
var webpack = require('webpack');
var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  context: __dirname,
  // entry is already defined in gulpfile.js - leave this line commented out.
  // entry: "/app/js/script.js",
  devtool: debug ? "inline-sourcemap" : null,
  module: {
    rules: [{
      test: /\.js$/,
      use: 'babel-loader'
    }],
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        query  :{
          presets:['es2015']
        },
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    root: [path.resolve(__dirname, 'client'), path.resolve(__dirname, 'node_modules')],
    extensions: ['', '.js']
  },
  output: {
    path: __dirname + "public/javascripts",
    filename: "scripts.min.js"
  },
  plugins: debug ? [] : [
    // new webpack.optimize.DedupePlugin(),
    // new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({ minimize: true, mangle: true }),
    // new BundleAnalyzerPlugin()
  ],
};

我的相关 Gulp 脚本：

gulp.task('scripts', function() {
    gulp.src('client/js/script.js')
    .pipe(webpack(require('./webpack.config.js')))
        .pipe(uglify())
    .pipe(gulp.dest('public/javascripts'))
    .pipe(livereload());
});

发生的情况是它只加载前 2 个包含，然后其余的不渲染。在 script.js 中包含部分的语法是否不正确？

这是我运行gulp scripts后的控制台输出

[13:56:14] Starting 'scripts'... [13:56:14] Finished 'scripts' after
3.53 ms [13:56:17] Version: webpack 1.15.0
         Asset     Size  Chunks             Chunk Names scripts.min.js  90.4 kB       0  [emitted]  main

编辑：经过进一步检查，确实似乎脚本正在正确输入 - 但它们没有运行。在部分中包含的函数中插入console.log("test")s 不会呈现 - 我的控制台是空的。

为什么会这样？

编辑 #2： 部分大部分只是 jQuery 代码，所以它们看起来都像这样：

var $ = require('jquery')

$(function() {
  console.log("test 3")
  // jquery code here
});

我只用控制台日志制作了 3 个测试文件，所有 3 个都出现了。

是因为我的功能有冲突吗？因为当它是我所有的正常代码时，它都不会运行，控制台中也没有错误。

【问题讨论】：

运行这个没有报错吗？
@JoseAPL 不。我将通过输出保持更新我的答案
console.log("test")写在哪里，怎么导出？
写在第一行的一个部分中，所以类似于$(function() { console.log("test") }); 如果我在第一部分中这样做，我可以在我的控制台中看到该消息，但如果我包括它在第三个或其他我没有。我正在尝试像第一行代码一样导出它，还是您指的是module.exports = init;之类的东西？
是的，您能否在第一个模块中添加一个基本部分，而那个模块没有被记录？

标签： javascript webpack gulp

【解决方案1】：

我变了：

var aScriptName = require('./modules/your-script');

收件人：

import {aScriptName} from './modules/your-script'

一切都按预期进行。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

【讨论】：