Foundation 6 + webpack : Cannot make Foundation JS work

问题

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.

I use foundation-sites 6.4.1

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,
    }
  }
}

In my .babelrc

{
    "presets": ["es2015", "es2016", "es2017", "stage-0", "react"],
    "plugins": ["transform-async-to-generator", "transform-runtime"]
}

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>

In my index.js i have this at the top of the file :

import 'script!jquery'
import 'script!what-input'
import 'script!foundation-sites'

Does someone have an idea ?

Thank You

回答1:

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'

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.

来源：https://stackoverflow.com/questions/45276232/foundation-6-webpack-cannot-make-foundation-js-work

标签

javascript

Webpack

zurb-foundation

webpack-dev-server