Question

构建应用

当我使用Webpack 2时，我需要禁用es2015的模块选项，我的.babelrc看起来像：

{
  "presets": [
    ["es2015", {"modules": false}],
    "react", 
    "stage-0"
  ],

  "plugins": [
    "transform-runtime",
    "add-module-exports",
    "transform-react-display-name",
    "flow-runtime",
    "react-hot-loader/babel"
  ]
}

我的webpack dev.config.js文件：

require('babel-polyfill');

// Webpack config for development
var fs = require('fs');
var path = require('path');
var webpack = require('webpack');
var assetsPath = path.resolve(__dirname, '../static/dist');
var host = (process.env.HOST || 'localhost');
var port = (+process.env.PORT + 1) || 3001;

// https://github.com/halt-hammerzeit/webpack-isomorphic-tools
var WebpackIsomorphicToolsPlugin = require('webpack-isomorphic-tools/plugin');
var webpackIsomorphicToolsPlugin = new WebpackIsomorphicToolsPlugin(require('./webpack-isomorphic-tools'));

module.exports = {
  devtool: 'inline-source-map',
  context: path.resolve(__dirname, '..'),
  entry: {
    'main': [
      'react-hot-loader/patch',
      'webpack-hot-middleware/client?path=http://' + host + ':' + port + '/__webpack_hmr',
      './src/client.js'
    ]
  },
  output: {
    path: assetsPath,
    filename: '[name]-[hash].js',
    chunkFilename: '[name]-[chunkhash].js',
    publicPath: 'http://' + host + ':' + port + '/dist/'
  },
  module: {
    loaders: [
      { test: /\.jsx?$/, exclude: /node_modules/, loaders: ['babel-loader', 'eslint-loader']},
      { test: /\.json$/, loader: 'json-loader' },
      { test: /\.less$/, loader: 'style-loader!css?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!autoprefixer?browsers=last 2 version!less?outputStyle=expanded&sourceMap' },
      { test: /\.scss$/, loader: 'style-loader!css?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!autoprefixer?browsers=last 2 version!sass?outputStyle=expanded&sourceMap' },
      { test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
      { test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
      { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=application/octet-stream" },
      { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader" },
      { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=image/svg+xml" },
      { test: webpackIsomorphicToolsPlugin.regular_expression('images'), loader: 'url-loader?limit=10240' }
    ]
  },
  resolve: {
    modules: [
      'src',
      'node_modules'
    ],
    extensions: ['*', '.json', '.js', '.jsx']
  },
  plugins: [
    // hot reload
    new webpack.HotModuleReplacementPlugin(),
    new webpack.IgnorePlugin(/webpack-stats\.json$/),
    new webpack.DefinePlugin({
      __CLIENT__: true,
      __SERVER__: false,
      __DEVELOPMENT__: true,
      __DEVTOOLS__: true  // <-------- DISABLE redux-devtools HERE
    }),
    webpackIsomorphicToolsPlugin.development()
  ]
};

运行babel时显示以下错误：

 (function (exports, require, module, __filename, __dirname) { import Express from 'express';
[1]                                                               ^^^^^^
[1] SyntaxError: Unexpected token import
[1]     at Object.exports.runInThisContext (vm.js:76:16)
[1]     at Module._compile (module.js:542:28)
[1]     at loader (D:\9. DEV\WORKSPACE\noname\node_modules\babel-register\lib\node.js:144:5)
[1]     at Object.require.extensions.(anonymous function) [as .js] (D:\9. DEV\WORKSPACE\noname\node_modules\babel-register\lib\node.js:154:7)
[1]     at Module.load (module.js:487:32)
[1]     at tryModuleLoad (module.js:446:12)
[1]     at Module._load (module.js:438:3)
[1]     at Function.module._load (D:\9. DEV\WORKSPACE\noname\node_modules\piping\lib\piping.js:218:16)
[1]     at Module.require (module.js:497:17)
[1]     at require (internal/module.js:20:19)
[0] Hash: 5c8e594486d73f27c13f
[0] Version: webpack 2.3.1
[0] Time: 3340ms

阅读this tutorial认为节点存在问题：

注意：Node.js尚不支持ES2015模块并使用ES2015   webpack 2配置文件中的模块会导致问题。

要解决这个问题，你需要两个.babelrc文件进行转换   配置和应用程序代码分开：
     项目根目录中的
，其中包含“presets”：[“es2015”]   应用代码的目录

我真的需要构建2个.babelrc个文件吗？是否有更新的工作解决方案？

Babel Unexpected toek使用“modules”导入：使用es2015的false选项

0 个答案: