如何使用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。