Foundation 6 + webpack:无法使 Foundation JS 工作 [英] Foundation 6 + webpack : Cannot make Foundation JS work
问题描述
我正在努力使用 webpack 安装 foudation js 6.我有一个意外的令牌导入".我觉得应该和babel有关，但是我找不到问题出在哪里.
I'm struggling to install foudation js 6 with webpack. I have an "Unexpected token import". I think it's should be related to babel but I can't find wher's the problem.
我使用基础站点 6.4.1
I use foundation-sites 6.4.1
这是我的 webpack.config.js
Here's my webpack.config.js
var webpack = require('webpack')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var express = require('express')
var path = require('path')
module.exports = {
module: {
loaders: [
{ test: /\.json$/, loader: 'json' },
{
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/,
include: path.join(__dirname, 'src'),
},
{ test: /\.scss$/, loader: ExtractTextPlugin.extract('style-loader', 'css!sass') },
{ test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader') },
{ test: /\.(eot|svg|ttf|woff2?).*$/, loader: 'url?limit=10000' },
{ test: /\.(png|jpg|jpeg).*$/, loader: 'url?limit=10000' },
],
},
plugins: [
new ExtractTextPlugin('bundle.[hash].css'),
new HtmlWebpackPlugin({
template: 'src/index.html.ejs',
}),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(process.env.NODE_ENV),
},
}),
new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /fr/),
],
entry: ['./src/index.js', './src/index.scss'],
output: {
path: 'build/',
filename: 'bundle.[hash].js',
},
devServer: {
inline: true,
stats: {
chunks: false,
}
}
}
在我的 .babelrc 中
In my .babelrc
{
"presets": ["es2015", "es2016", "es2017", "stage-0", "react"],
"plugins": ["transform-async-to-generator", "transform-runtime"]
}
在我的 index.html.ejs
In my index.html.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Title</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
在我的 index.js 文件的顶部有这个:
In my index.js i have this at the top of the file :
import 'script!jquery'
import 'script!what-input'
import 'script!foundation-sites'
有人有想法吗?
谢谢
推荐答案
foundation-sites 的入口点使用 ES 模块(import/export)，但你没有申请babel-loader 到 node_modules，所以它们不会被转换.您或许可以导入已经转译的版本:
The entry point of foundation-sites uses ES modules (import/export), but you're not applying babel-loaderto node_modules, so they won't be transformed. You might be able to import the already transpiled version:
import 'foundation-sites/dist/js/foundation.js'
从 webpack 2 开始就支持 ES 模块.强烈建议升级 webpack.官方迁移指南应该可以帮助您.
ES modules are supported out of the box since webpack 2. It's highly recommended to upgrade webpack. The official migration guide should help you with that.
这篇关于Foundation 6 + webpack:无法使 Foundation JS 工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
