javascript - 如何使用webpack导入组件？

Question

我正在使用带有 gulp-webpack 的 gulpfile - 我想将我的 javascript 代码拆分为不同的模块，并将它们捆绑到一个缩小的文件中。

以下是我的代码片段:

函数.js:

var $ = require('jquery');

function init() {
  console.log("piped");
  // main expansion element
  $(".button").click(function() {
    // code goes here, etc
  });
}

module.exports = init;

脚本.js

import script from './app/js/function.js';

module.exports = script;

webpack-config.js

var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');

module.exports = {
  context: __dirname,
  devtool: debug ? "inline-sourcemap" : null,
  entry: "./app/js/script.js",
  output: {
    path: __dirname + "public/javascripts",
    filename: "scripts.min.js"
  },
  plugins: debug ? [] : [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
  ],
};

吞咽任务:

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

这就是我迷失的地方 - 我的任务已成功将 scripts.min.js 文件输出到正确的目录，但我收到此错误:

Uncaught SyntaxError: Unexpected token import

我没有正确导入导入吗？我指的是这个文档https://webpack.js.org/guides/code-splitting/这建议简单地使用 import 语句并将其指向您正在引用的文件。

编辑:清理我的 webpack 知识，所以:

我改变了:

import function from './app/js/function.js';

module.exports = script;

致:

var function = require('function.js');

module.exports = function;

但我的控制台现在显示:

ERROR in ./app/js/script.js
Module not found: Error: Cannot resolve module 'script.js' in /projects/new-platform-prototype/app/js
 @ ./app/js/script.js 1:10-27

即使脚本在那里？

Answer 1

如果我正确地阅读了您此处的内容，则 script.js 似乎正在尝试导入自身。你要导入，我假设是function.js，import {init} from "./function"。抱歉我不知道你的路。您也没有执行任何代码，因此对于 script.js，您需要运行它 init()。

模块.js

export function doesStuff() {}

脚本.js

import {doesStuff} from "module"

doesStuff();

webpack.config.js

module.exports = {
  context: __dirname,
  devtool: debug ? "inline-sourcemap" : null,
  entry: "./app/js/script.js",
  module: {
    loaders: [{
      test: /.js?$/,
      loader: "babel-loader"
    }]
  },
 output: {
   path: __dirname + "public/javascripts",
   filename: "scripts.min.js"
 },
 ...
};