[英]Import JS partials with webpack and gulp
I don't understand how the following line of code works: 我不明白以下代码行的工作方式:
var aScriptName = require('./modules/your-script');
I want to split out my JS by using the require statement above with webpack. 我想通过将上面的require语句与webpack一起使用来拆分JS。 What I don't understand, is that when I include this multiple times in the script file, my partials do not all consistently load.
我不明白的是,当我在脚本文件中多次包含此文件时,我的局部文件不会全部一致地加载。
My folder structure for my JS looks something like this: 我的JS的文件夹结构如下所示:
-app
---js
-----script.js
-----modules
---------module1.js
---------module2.js
---------module3.js
---------module4.js
With this in mind, what I'm trying to do is call the modules like this in script.js: 考虑到这一点,我想做的是在script.js中调用这样的模块:
var 1script = require('./modules/module1');
var 2script = require('./modules/module2');
var 3script = require('./modules/module3');
var 4script = require('./modules/module4');
A full copy of my webpack is below: 我的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()
],
};
My relevant Gulp script: 我相关的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());
});
What's happening is it's only loading the first 2 includes, then the rest don't render. 发生的事情是,它仅加载了前两个包含项,其余的则不渲染。 Is the syntax not correct for including the partials in script.js?
在script.js中包含分词的语法是否正确?
This is my console output after running gulp scripts
这是运行
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
EDIT: Upon further inspection, it does indeed seem that scripts are being piped in correctly - but they don't run. 编辑:经过进一步检查,确实确实可以正确地传递脚本-但它们无法运行。 plugging in
console.log("test")
s in the functions contained in the partials don't render - my console is empty. 在部分中包含的函数中插入
console.log("test")
不会呈现-我的控制台是空的。
Why would that be? 为什么会这样呢?
EDIT #2: The partials is mostly just jQuery code, so they all look something like this: 编辑#2:局部大部分只是jQuery代码,所以它们都看起来像这样:
var $ = require('jquery')
$(function() {
console.log("test 3")
// jquery code here
});
I made 3 test files with just console logs, and all 3 appeared. 我只用控制台日志制作了3个测试文件,然后全部显示了3个。
Is it because something is conflicting in my functions? 是因为我的功能发生冲突吗? Because when it's all my normal code, none of it runs, with no errors in console.
因为当所有的都是我的普通代码时,它们都没有运行,并且控制台中没有错误。
I changed: 我变了:
var aScriptName = require('./modules/your-script');
To: 至:
import {aScriptName} from './modules/your-script'
And everything is working as expected. 一切都按预期进行。
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/import
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.