0
我第一次嘗試使用ES6模塊,嘗試使用Webpack進行基本捆綁。我想使用Babel 6(當前最新最好的)在Webpack加載器中進行轉譯。我讀過this和this和this。Grunt/Webpack/Babel中的路徑錯誤
的package.json包括:
"devDependencies": {
"babel": "~6.0.12",
"babel-core": "~6.0.12",
"babel-loader": "~6.0.0",
"babel-preset-es2015": "^6.0.14",
"grunt": "~0.4.5",
"grunt-webpack": "^1.0.11",
"webpack": "^1.12.2",
"webpack-dev-server": "^1.12.1"
},
文件結構:
myproject
├── js
│ ├── es6
│ │ ├── app.js
│ │ ├── lib
│ │ │ ├── lib1.js
│ │ │ ├── lib2.js
│ │ └── modules
│ │ └── _myModule.js
├── node_modules
├── index.html
├── gruntfile.js
gruntfile.js
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
webpack: {
options: {
entry: "./js/es6/app.js",
output: {
path: __dirname,
filename: "webpacked.js",
},
module : {
loaders: [
{
// grunt --verbose says the problem is with the next line
include: path.resolve(__dirname, "es6"),
loader: 'babel',
query: {
presets: ['es2015']
}
}
]
},
failOnError: true,
resolve: {
root: [ "js", "node_modules" ],
}
},
build : {
devtool: "sourcemap",
debug: true
}
},
});
grunt.loadNpmTasks('babel');
grunt.loadNpmTasks('babel-core');
grunt.loadNpmTasks('babel-loader');
grunt.loadNpmTasks('babel-preset-es2015');
grunt.loadNpmTasks('grunt-minify-html');
grunt.loadNpmTasks('grunt-webpack');
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['webpack']);
};
我顯然缺少與路徑處理很基本的東西。我甚至無法開始,而且我已經圈了幾個小時,嘗試了很多組合。錯誤是:
Loading "Gruntfile.js" tasks...ERROR
>> ReferenceError: path is not defined
任何幫助非常感激。
:)謝謝。現在我收到錯誤「Module parse failed:myproject/js/es6/app.js Line 1:Unexpected token:'Fling from Fling.js'您可能需要一個合適的加載器來處理這種文件類型。」看起來,轉譯的Babel加載器只能設置爲在模塊上工作,而不是在app.js「entry」文件本身中的ES6「導入」代碼上。如何在構建的一開始就傳輸條目「app.js」文件,同時仍然只使用Webpack? – Ben
'include'需要匹配任何ES6文件,所以如果你在'es6'文件夾外有一個文件夾,你需要擴展'include'以匹配它。 – loganfsmyth