从jQuery的Webpack开始

Question

在我们的团队中，我们希望迁移到ES6。我们正在使用jQuery和许多插件，其中一些是纯javascript的，比如interactjs，而其他的则完全适用于jQuery。

我们想利用ES6的优点(类、箭头函数等)，但我不知道如何开始。

我已经阅读了文档，但我不知道如何开始使用插件，jQuery (我已经阅读了React，Babel，但没有针对我的情况)。

谢谢!

Answer 1

您可以从一个简单的webpack配置开始，将您当前的js资产与babel加载器捆绑在一起。通过npm安装webpack、babel-loader、babel-core和babel-preset-es2015。

webpack.config.js

var path = require('path');
var webpack = require('webpack');

module.exports = {
  entry: './main.js',
  output: { path: __dirname, filename: 'bundle.js' },
  module: {
    loaders: [
      {
        test: /.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['es2015']
        }
      }
    ]
  },
};

您可以指定多个入口点。这应该足够开始使用了。下一步，您可以添加

用于开发的

1. Webpack-dev-server和热模块replacement
2. Production配置可实现最佳构建大小的UglifyJS插件
3. 捆绑包资产，如字体和图像
4. 捆绑包css/scss，带后处理器(如autoprefixer)

)

这些文档将对如何选择最好的插件、配置、CLI标志等提供很大的帮助。