2017-07-25 6 views
1

私はES6からES5にプロジェクト全体をコンパイルする必要がreact-toolboxためcljsjsパッケージをアップグレードしようとしています。このエラーが表示されます:ES6からES5をコンパイルするときに予期しないトークンが発生しました。

Hash: b375d2042d9b41b2ee59 
Version: webpack 2.7.0 
Time: 95ms 
       Asset  Size Chunks    Chunk Names 
react-toolbox.inc.js 27.7 kB  0 [emitted] main 
    + 1 hidden modules 

ERROR in ./packages/react-toolbox/src/components/index.js 
Module parse failed: /Users/pupeno/.boot/cache/tmp/Users/pupeno/Documents/code/clojure/packages/react-toolbox/ah7/x50qw4/react-toolbox-react-toolbox-2.0.0-beta.12/packages/react-toolbox/src/components/index.js Unexpected token (24:7) 
You may need an appropriate loader to handle this file type. 
| export { default as ProgressBar } from './progress_bar'; 
| export * from './radio'; 
| export Ripple from './ripple'; 
| export { default as Slider } from './slider'; 
| export { default as Snackbar } from './snackbar'; 

リップルは問題のトークンのようです。何が起きているのか?

完全なファイルが含まれています:

import './utils/polyfills'; // Import polyfills for IE11 

export { overrideComponentTypeChecker } from './utils/is-component-of-type'; 
export { default as AppBar } from './app_bar'; 
export { default as Autocomplete } from './autocomplete'; 
export { default as Avatar } from './avatar'; 
export * from './button'; 
export * from './card'; 
export { default as Chip } from './chip'; 
export { default as Checkbox } from './checkbox'; 
export { default as DatePicker } from './date_picker'; 
export { default as Dialog } from './dialog'; 
export { default as Drawer } from './drawer'; 
export { default as Dropdown } from './dropdown'; 
export { default as FontIcon } from './font_icon'; 
export { default as Input } from './input'; 
export * from './layout'; 
export { default as Link } from './link'; 
export * from './list'; 
export * from './menu'; 
export { default as Navigation } from './navigation'; 
export { default as ProgressBar } from './progress_bar'; 
export * from './radio'; 
export Ripple from './ripple'; 
export { default as Slider } from './slider'; 
export { default as Snackbar } from './snackbar'; 
export { default as Switch } from './switch'; 
export * from './table'; 
export * from './tabs'; 
export Tooltip from './tooltip'; 
export { default as TimePicker } from './time_picker'; 

と私が構築してるのWebPACKの設定は、これまでのところ、次のようになります。

const pkg = require('./package'); 
const path = require('path'); 
const webpack = require('webpack'); 
const ExtractTextPlugin = require('extract-text-webpack-plugin'); 

const entryName = "react-toolbox.inc"; 

const extractCss = new ExtractTextPlugin({ filename: entryName + '.css', allChunks: true }); 

module.exports = { 
    target: 'web', 
    context: __dirname, 
    entry: path.join(__dirname, "packages", "react-toolbox", "src", "components", "index.js"), 
    externals: { 
     "react": "React", 
     "react-dom": "ReactDOM", 
     "react-addons-css-transition-group": "React.addons.CSSTransitionGroup" 
    }, 
    output: { 
     path: __dirname, 
     filename: entryName + '.js', 
     libraryTarget: 'var', 
     library: 'ReactToolbox' 
    }, 
    resolve: { 
     extensions: ['.js', '.css', '.json'], 
     modules: ['node_modules'] 
    }, 
    module: { 
     rules: [ 
      { 
       test: /\.js$/, 
       use: 'babel-loader', 
       include: [ 
        path.join(__dirname, './components'), 
        path.join(__dirname, './spec') 
       ] 
      }, { 
       test: /\.css$/, 
       include: [ 
        path.join(__dirname, './components'), 
        path.join(__dirname, './spec'), 
         /node_modules/ 
       ], 
       use: extractCss.extract({ 
        fallback: 'style-loader', 
        use: [ 
         { 
          loader: 'css-loader', 
          query: { 
           modules: true, 
           localIdentName: '[name]__[local]___[hash:base64:5]', 
           sourceMap: true 
          }, 
         }, 
         'postcss-loader' 
        ]}) 
      } 
     ] 
    }, 
    plugins: [ 
     new webpack.LoaderOptionsPlugin({ 
      options: { 
       context: __dirname, 
       postcss: function() { 
        return [ 
         require('postcss-import')({ 
          root: __dirname, 
          path: [path.join(__dirname, './components')] 
         }), 
         require('postcss-mixins')(), 
         require('postcss-each')(), 
         require('postcss-cssnext')(), 
         require('postcss-reporter')({ 
          clearMessages: true 
         }) 
        ]; 
       } 
      } 
     }), 
     extractCss, 
     new webpack.HotModuleReplacementPlugin(), 
     new webpack.DefinePlugin({ 
      'process.env.NODE_ENV': JSON.stringify('production'), 
      VERSION: JSON.stringify(pkg.version) 
     }) 
    ] 
}; 

答えて

1

エラーは、それが

export Ripple from './ripple'; 
言葉通りであり

は有効ではありません。

export {default as Ripple} from './ripple'; 

あなたの現在のコードは、https://babeljs.io/docs/plugins/transform-export-extensions/をロードする必要があります。

+0

どのようにプラグインをwebpackにロードしますか? – Pablo

+0

それをインストールしてBabelの設定に追加します。 – loganfsmyth

+0

それでは、CIでどのように作業するのですか?ウェブパックやリポジトリにあるその他のファイルにこのような種類のものを指定するべきではありませんか? – Pablo

関連する問題