如何使用webpack导入组件？

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文件到正确的目录，但我得到这个错误：

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"。对不起，我不知道你的路径。你也没有执行任何代码，所以你需要运行它init()script.js。

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); 

ř ollup.config.js

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

Answer 3

为了使用import您需要的巴贝尔transpiler并为您的WebPack配置相应的加载器。

这是你需要做什么：

1.设置通天

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

需要通天核到transpile你的代码的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。