如何使用webpack导入组件? [英] How to import components using webpack?

问题描述

我正在将gulpfile与gulp-webpack一起使用-我想将javascript代码拆分为不同的模块，然后将它们捆绑到一个缩小的文件中.

I'm using a gulpfile with gulp-webpack - I want to split my javascript code into different modules, and have them bundled into a single minified file.

下面是我的代码片段:

function.js:

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

script.js

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

module.exports = script;

webpack-config.js

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

This where I'm lost - my task is successfully outputting a scripts.min.js file to the correct directory but I'm getting this error:

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

Uncaught SyntaxError: Unexpected token import

我不能正确导入导入吗?我指的是此文档 https://webpack.js.org/guides/code-建议使用splitting/来简单地使用import语句，并将其指向您正在引用的文件.

Am I not importing the import correctly? I'm refering to this documentation https://webpack.js.org/guides/code-splitting/ which is suggesting to simply use the import statement and pointing it to the file that you're referencing.

清除了我的Webpack知识，所以:

我更改了:

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

module.exports = script;

收件人:

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

module.exports = function;

但是我的控制台现在在说:

But my console is now saying:

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

即使脚本在那里?

推荐答案

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

import statements are not officially supported yet so you have to use a plugin to transpile your code to currently supported standart.

查看 babel-loader 以获得安装和使用说明.

Check out babel-loader for install and usage instructions.

顺便说一下，还有一个名为汇总的捆绑器，它支持现成的import.

By the way there is another bundler called rollup which supports imports out of the box.

只是决定在这里放一个简单的汇总示例，因为我非常喜欢它，而且看来您还不知道要使用哪个捆绑器. :)

Just decided to put a simple rollup example here since I am big fan of it and it seems you don't know yet which bundler you're going to stick with. :)

运行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'
  }
};

这篇关于如何使用webpack导入组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！