【问题标题】:convert es6 npm module to es5将 es6 npm 模块转换为 es5
【发布时间】:2017-12-01 15:48:35
【问题描述】:

我目前正在使用使用 babel+webpack 作为 es6 实现的应用程序。 我的 webpack 配置如下

` 常量 webpack = require('webpack'); const path = require('path');

  const DEV = process.env.NODE_ENV !== 'production';

  module.exports = {
    bail: !DEV,
    devtool: DEV ? 'cheap-module-source-map' : 'source-map',
    target: 'node',
    entry: './src/server/index.js',
    output: {
      path: path.join(__dirname,'build/server'),
      filename: 'bundle.js',
      publicPath: '/',
    },
    externals: (context, request, callback) => {
      // Externalize all npm modules.
      if (/^[a-z0-9-][a-z0-9-./]+$/.test(request)) {
        return callback(null, `commonjs ${request}`);
      }
      callback();
    },
    module: {
      loaders: [
        {
          test: /\.js$/,
          loader: 'babel-loader',
          // exclude: /(node_modules)/,
        },
        {
          test: /\.json$/,
          loader: 'json-loader',
        },
        {
          test: /\.(graphql|gql)$/,
          exclude: /node_modules/,
          loader: 'graphql-tag/loader',
        },
        {
           test: /\.js/,
           loader: 'import-glob',
           exclude: /(node_modules)/
        },
        {
          enforce: "pre",
          test: /\.js$/,
          exclude: /(node_modules)/,
          loader: 'eslint-loader'
        }
      ],
    },
    plugins: [
      new webpack.DefinePlugin({
        'process.env.NODE_ENV': JSON.stringify(DEV ? 'development' : 'production'),
      }),
    ],
    node: {
      console: false,
      global: false,
      process: false,
      Buffer: false,
      __filename: false,
      __dirname: false,
      setImmediate: false,
    }
  };

One of the modulenode-lyftis implemented in es6 format . when I tried to import the package it gives the es6 error which isimport 未定义`

【问题讨论】:

  • 默认情况下忽略/node_modules/ 下的任何内容。如果您希望 Babel 转换特定的第三方模块,您可以通过调整 includeexclude 选项来实现。

标签: javascript webpack ecmascript-6 babeljs


【解决方案1】:

当您第一次开始使用 webpack 时,可能会感到困惑。你需要做的就是把它添加到你的 babel loader

options: { presets: ['env'] } 

并确保你运行

 npm install babel-preset-env

您需要预设将 ES2015+ 编译为 ES5

【讨论】:

  • "webpack 太奇怪了,你不需要把它添加到你的 babel loader" 你为什么觉得这很奇怪?
  • 似乎是一个小评论,但我并不是说向你的加载器添加选项很奇怪,我只是说当你第一次开始使用 webpack 时可能会感到困惑。不太清楚你为什么还要费心去问
  • 我明白了。这听起来像是对我的抱怨。无论哪种方式,我都不认为这(单独)解决了 OP 的问题。请参阅我对这个问题的评论。
  • 明白了,我更改了措辞以更好地反映我的意思。这些天我个人使用 gulp,所以我也不是 100% 确定
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-09-24
  • 2020-05-29
  • 2016-03-28
  • 1970-01-01
  • 2016-09-13
  • 1970-01-01
相关资源
最近更新 更多