Question

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

以下是我对代码的摘要：

function.js：

var $ = require('jquery');

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

module.exports = init;

的script.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 }),
  ],
};

Gulptask：

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文件输出到正确的目录，但我收到此错误：

未捕获的SyntaxError：意外的令牌导入

我没有正确导入导入吗？我参考了这篇文档https://webpack.js.org/guides/code-splitting/，它建议只使用import语句并将其指向您引用的文件。

编辑：除掉我的网络包知识，所以：

我改变了：

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()。

module.js

export function doesStuff() {}

的script.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"
 },
 ...
};

Answer 2

import语句尚未得到官方支持，因此您必须使用插件将代码转换为当前支持的标准。

查看babel-loader了解安装和使用说明。

顺便说一下，还有另一个名为rollup的捆绑包支持import开箱即用。

修改

刚刚决定在这里放一个简单的汇总示例，因为我很喜欢它，而且你似乎还不知道你会坚持使用哪种捆绑器。：）

运行npm i -g rollup和rollup -c进行编译。

<强> answer.js

export default 42;

<强> util.js中

export function print(...args) { console.log(...args); }

<强> index.js

import answer from './answer'; import { print } from './util'; print('The answer is:', answer);

<强> rollup.config.js

export default { input: 'index.js', output: { file: 'bundle.js', format: 'iife' } };

Answer 3

为了使用import，你需要babel转发器和你的webpack配置的相应加载器。

这是你需要做的：

<强> 1。设置Babel

npm i -D babel-core babel-loader babel-preset-es2015

需要babel-core才能将您的代码转换为ECMAScript 5，因此您的浏览器可以明白它。 babel-loader用于webpack和babel-preset-es2015 告诉babel，如何转换你的代码。

接下来在项目根目录中创建一个名为.babelrc的文件，其中包含以下代码： { "presets": ["es2015"] }

<强> 2。配置webpack

最后，将这段代码添加到现有的webpack配置中：

module: { rules: [{ test: /\.js$/, use: 'babel-loader' }] }

还有一件事

要解锁更多ECMAScript功能，请查看babel提供的预设和插件，并将它们集成到.babelrc中。你可以找到它们here。

此答案假定您至少在第2版中使用了webpack。

修改

如果您使用

import {...} from './dir/file';

导入你的代码并省略文件扩展名，你需要通过添加
来告诉webpack如何解决这个问题
resolve: { extensions: ['.js'] }

到你的webpack配置。

这会告诉webpack查找./dir/file.js而不仅仅是./dir/file。

如何使用webpack导入组件？

3 个答案: