2017-07-25 64 views
1

我試圖升級cljsjsreact-toolbox需要編譯整個項目從ES6到ES5。我得到這個錯誤:編譯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'; 

無效ES6。它需要

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

您當前的代碼需要加載https://babeljs.io/docs/plugins/transform-export-extensions/

+0

如何在webpack上加載該插件? – Pablo

+0

你會安裝它並將其添加到你的Babel配置中。 – loganfsmyth

+0

它應該如何在CI上工作?這種類型的東西不應該在網絡包或其他文件中指定嗎? – Pablo