如何使用 webpack 导入组件？

Question

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

以下是我所拥有的代码的 sn-ps：

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

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() {}

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 的捆绑程序支持 imports 开箱即用。

编辑：

刚刚决定在这里放一个简单的汇总示例，因为我非常喜欢它，而且您似乎还不知道要坚持使用哪个捆绑程序。 :)

运行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。