在React-static站点中使用Foundation

时间:2018-04-13 20:07:12

标签: reactjs webpack zurb-foundation

我正在尝试在我正在创建的react-static站点中使用基础。使用npm start启动本地节点服务器进行实时重新加载时,一切正常,但是我无法使用npm run build成功构建我的网站。

我遇到的错误是:

/Users/abroccoli/Documents/apm.net/apm-react-static/node_modules/foundation-sites/dist/js/npm.js:1
  (function (exports, require, module, __filename, __dirname) { import $ from 'jquery';
                                                                ^^^^^^
  SyntaxError: Unexpected token import

通过我对webpack和react-static以及node.js的研究,我认为该节点存在基础站点文件的ES6语法问题。但是,react-static是在ES6中编写的,并在每个文件的开头使用import。

我正在使用react-static附带的基本webpack配置,并且应该包含用于使用Babel解析ES6的正确加载器。

webpack: (config, { defaultLoaders, stage }) => {
    config.module.rules = [
      {
        oneOf: [
          {
            test: /\.s(a|c)ss$/,
            use:
              stage === 'dev'
                ? [{ loader: 'style-loader' }, { loader: 'css-loader' }, { loader: 'sass-loader' }]
                : ExtractTextPlugin.extract({
                  use: [
                    {
                      loader: 'css-loader',
                      options: {
                        importLoaders: 1,
                        minimize: true,
                        sourceMap: false,
                      },
                    },
                    {
                      loader: 'sass-loader',
                      options: { includePaths: ['src/'] },
                    },
                  ],
                }),
          },
          defaultLoaders.cssLoader,
          defaultLoaders.jsLoader,
          defaultLoaders.fileLoader,
        ],
      },
    ]
    return config
  },

我怀疑我没有正确加载基础网站。当我构建反应静态站点时,如何让基础站点工作?

1 个答案:

答案 0 :(得分:0)

更新节点以便能够使用新的ES6标准。