Question

我有以下文件：

./client/.babelrc
./client/index.js
./server/.babelrc
./server/index.js

客户端

./client/index.js代码是：

import 'test';

./client/.babelrc是：

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

客户端代码由webpack 2. webpack 2 supports ES6 modules使用。 es2015-webpack是一个babel预设，可将代码转换为ES5，但不会将ES6模块转换为CommonJS。因此，转换后的代码保持不变。

服务器

./server/index.js代码是：

import './../client';

./server/.babelrc是：

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

node.js v5.5.0不支持ES6模块。因此，整个代码需要转换为ES5。但是，节点脚本需要包含客户端代码的一部分（例如，配置，初始状态）。

我尝试使用babel-node运行服务器代码，例如

cd ./server
babel-node ./index.js

这会产生错误：

./client/index.js:1
import 'test';
^^^^^^

SyntaxError: Unexpected token

这样做的原因是babel-node（和babel）尊重./client/.babelrc。

在编译服务器代码时，如何强制Babel对整个代码库使用babel-plugin-transform-es2015-modules-commonjs插件（或es2015预设）？

我尝试过使用--no-babelrc选项。但它只忽略当前工作目录中的.babelrc。

Answer 1

刚刚处理类似的问题

我最终删除了[.babelrc]

中的所有预设

通过webpack [webpack.config.js]

添加客户端预设

  module: {
    loaders: [
      { test: /\.js$/, exclude: /node_modules/, 
        loader: 'babel-loader', 
        query: { presets: ["react", "es2015-webpack"] } }
    ]
  },

通过[babel-node]

运行服务器预设

  "scripts": {
    "start": "set NODE_ENV=development; webpack --progress && babel-node --presets es2015,react modules/server.js"
  },

如何强迫Babel进行转型？

客户端

服务器

1 个答案: