如何在webpack中使用ES6。配置吗? 就像这个回购 https://github.com/kriasoft/react-starter-kit 呢?

例如:

使用这个

import webpack from 'webpack';

而不是

var webpack = require('webpack');

与其说这是一种需求,不如说是一种好奇心。


当前回答

另一种方法是这样写一个npm脚本:"webpack": "babel-node ./node_modules/webpack/bin/webpack",然后像这样运行:

其他回答

将webpack.config.js重命名为webpack.config.babel.js。

然后在.babelrc: {"presets": ["es2015"]}

然而,如果你想为babel-cli使用不同的babel配置,你的.babelrc可能看起来像这样:

{
  "env": {
    "babel-cli": {
      "presets": [["es2015", {"modules": false}]]
    },
    "production": {
      "presets": ["es2015"]
    },
    "development": {
      "presets": ["es2015"]
    }
  }
}

在package.json中:

{
  "scripts": {
    "babel": "BABEL_ENV='babel-cli' babel src -d dist/babel --source-maps",
    "build-dev": "NODE_ENV='development' webpack -d --progress --profile --colors",
    ...
  },
  ...
}

这是愚蠢的,但{"modules": false}将破坏webpack如果你不使用不同的环境。

有关.babelrc的更多信息,请查看官方文档。

这真的很简单,但从任何答案中我都看不出来,所以如果有人和我一样困惑:

只需将.babel附加到你的文件名扩展名之前的部分(假设你已经安装了babel寄存器作为依赖项)。

例子:

mv webpack.config.js webpack.config.babel.js

这就是我使用webpack 4时的效果:

在package.json:

"scripts": {
    "dev": "cross-env APP_ENV=dev webpack-serve --require @babel/register"
},

"devDependencies": {
    "@babel/core": "^7.0.0-rc.1",
    "@babel/register": "^7.0.0-rc.1",
    "@babel/preset-env": "^7.0.0-rc.1",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2"
},

"babel": {
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "node": "current"
      }
    }]
  ],
  "plugins": [
    "transform-es2015-modules-commonjs"
  ]
}

您可以清楚地看到每个依赖项是如何使用的,所以没有什么奇怪的。

注意我使用的是webpack-serve——require,但如果你想使用webpack命令,请将其替换为webpack——config-register。在任何一种情况下,都需要@babel/register来实现此工作。

就是这样!

纱线开发

你可以在配置中使用es6 !


对于webpack-dev-server,使用与webpack命令相同的——config-register选项


注意:

不需要将配置文件重命名为webpack.config.babel.js(由已接受的答案所建议)。Webpack.config.js可以正常工作。

我最好的方法与npm脚本是

node -r babel-register ./node_modules/webpack/bin/webpack

并根据您对Babel的需求配置其余脚本

没有足够的代表来评论,但我想为任何TypeScript用户添加一个类似于上面@Sandrik的解决方案

我有两个脚本,我使用指向webpack配置(JS文件),包含ES6语法。

"start-dev": "./node_modules/.bin/ts-node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js——config. /webpack/webpack.config.dev.js"

and

"./node_modules/.bin/ts-node ./node_modules/webpack/bin/webpack.js——config webpack/webpack.config.js"