如何在webpack中使用ES6。配置吗? 就像这个回购 https://github.com/kriasoft/react-starter-kit 呢?
例如:
使用这个
import webpack from 'webpack';
而不是
var webpack = require('webpack');
与其说这是一种需求,不如说是一种好奇心。
如何在webpack中使用ES6。配置吗? 就像这个回购 https://github.com/kriasoft/react-starter-kit 呢?
例如:
使用这个
import webpack from 'webpack';
而不是
var webpack = require('webpack');
与其说这是一种需求,不如说是一种好奇心。
当前回答
这就是我使用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脚本:"webpack": "babel-node ./node_modules/webpack/bin/webpack",然后像这样运行:
对于TypeScript:直接从https://webpack.js.org/configuration/configuration-languages/
npm install --save-dev typescript ts-node @types/node @types/webpack
# and, if using webpack-dev-server
npm install --save-dev @types/webpack-dev-server
然后继续写你的,例如: webpack.config.ts
import path from 'path';
import webpack from 'webpack';
const config: webpack.Configuration = {
mode: 'production',
entry: './foo.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'foo.bundle.js'
}
};
export default config;
如果你的目标不是commonjs(这是一个要求,因为它依赖于ts-node),你可以使用一个插件来为webpack配置一个单独的tsconfig文件。
看了无数的文件之后……
只需安装es2015预置(不是env !!)并将其添加到 .babelrc: { “预设”:( ["es2015", {"modules": false}] ] } 将webpack.config.js重命名为webpack.config.babel.js
使用Webpack 4和Babel 7
要设置webpack配置文件以使用ES2015需要Babel:
安装开发依赖项:
npm i -D webpack \
webpack-cli \
webpack-dev-server \
@babel/core \
@babel/register \
@babel/preset-env
npm i -D html-webpack-plugin
创建一个.babelrc文件:
{
"presets": ["@babel/preset-env"]
}
创建webpack配置,webpack.config.babel.js:
import { resolve as _resolve } from 'path';
import HtmlWebpackPlugin from 'html-webpack-plugin';
const config = {
mode: 'development',
devServer: {
contentBase: './dist'
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'src/index.html'
})
],
resolve: {
modules: [_resolve(__dirname, './src'), 'node_modules']
}
};
export default config;
在package.json中创建脚本:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"start": "webpack-dev-server --open"
},
运行npm Run build和npm start。
webpack配置基于以下目录结构的示例项目:
├── README.md
├── package-lock.json
├── package.json
├── src
│ ├── Greeter.js
│ ├── index.html
│ └── index.js
└── webpack.config.babel.js
示例项目:Webpack配置语言使用Babel
作为@bebraw建议的替代方案,您可以使用ES6+语法创建一个JavaScript自动化脚本:
// tools/bundle.js
import webpack from 'webpack';
import webpackConfig from './webpack.config.js'; // <-- Contains ES6+
const bundler = webpack(webpackConfig);
bundler.run(...);
用巴别塔来执行:
$ babel-node tools/bundle
附注:当你需要实现更复杂的构建步骤时,通过JavaScript API调用webpack可能是一个更好的方法(比通过命令行调用它)。例如,在服务器端bundle准备好后,启动Node.js应用服务器,在Node.js服务器启动后,启动BrowserSync开发服务器。
参见:
React Starter Kit(包。Json /scripts, tools/bundle.js, tools/webpack.config.js) React静态样板(run.js, webpack.config.js,节点运行) 你可能不需要Gulp.js