Question

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

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');

我的网站包的完整副本如下：

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")不要渲染 - 我的控制台是空的。

为什么会这样？

编辑＃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/en-US/docs/Web/JavaScript/Reference/Statements/import

使用webpack和gulp导入JS部分

1 个答案: