使用webpack和gulp导入JS局部函数

Question

我不明白以下代码行的工作方式：

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

我想通过将上面的require语句与webpack一起使用来拆分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());
});

发生的事情是，它仅加载了前两个包含项，其余的则不渲染。 在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")不会呈现-我的控制台是空的。

为什么会这样呢？

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

var $ = require('jquery')

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

我只用控制台日志制作了3个测试文件，然后全部显示了3个。

是因为我的功能发生冲突吗？ 因为当所有的都是我的普通代码时，它们都没有运行，并且控制台中没有错误。

Answer 1

我变了：

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

至：

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

一切都按预期进行。

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/import