ES6功能兼容

Question

您好，我在更改要求导入语句时遇到问题。 我的所有文件都支持箭头功能和const，let等。仅当我更改require语句导入时，我遇到了很多麻烦。

以下是我的文件：

我的Grunt文件：

const request = require('request');
const webpackConfigDev = require('./webpack.config.dev');
const webpackConfigProd = require('./webpack.config.prod');

module.exports = function init(grunt) {
  require('time-grunt')(grunt);
  require('load-grunt-tasks')(grunt);

  const reloadPort = 35729;
  let files;

  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    eslint: {
      target: ['app/**/*.js', 'clientSide/**/*.js', 'config/**/*.js',
        'test/**/*.js', 'app.js', 'Gruntfile.js'],
    },
    webpack: {
      options: {
        stats: !process.env.NODE_ENV || process.env.NODE_ENV === 'development',
      },
      prod: webpackConfigProd,
      dev: Object.assign({ watch: true }, webpackConfigDev),
    },

    mocha_istanbul: {
      coverage: {
        src: 'test/**/*.js',
        options: {
          check: {
            statements: 85,
            functions: 85,
            branches: 77,
          },
          excludes: [
            'app.js',
            'config/*',
            'migrations/xyz/*',
            'app/models/*',
          ],
        },
      },
    },
    mochaTest: {
      test: {
        options: {
          quiet: false,
          noFail: false,
        },
      },
      src: ['test/spec/**/*.js'],
    },
    develop: {
      server: {
        file: 'app.js',
      },
    },
    stylus: {
      dist: {
        files: {
          'public/css/style.css': 'public/css/style.styl',
        },
      },
    },


  grunt.config.requires('watch.js.files');
  files = grunt.config('watch.js.files');
  files = grunt.file.expand(files);

  // Load the npm dependencies into grunt
  grunt.loadNpmTasks('grunt-mocha-test');
  grunt.loadNpmTasks('grunt-mocha-istanbul');

  // Load webpack plugin npm tasks.
  grunt.loadNpmTasks('grunt-webpack');

  grunt.registerTask('delayed-livereload', 'Live reload after the node server has restarted.',
    () => {
      const done = this.async();
      setTimeout(() => {
        request.get(`http://localhost:${reloadPort}/changed?files=${files.join(',')}`,
          (err, res) => {
            const reloaded = !err && res.statusCode === 200;
            if (reloaded) {
              grunt.log.ok('Delayed live reload successful.');
            } else {
              grunt.log.error('Unable to make a delayed live reload.');
            }
            done(reloaded);
          });
      }, 500);
    });

  grunt.registerTask('test', [
    'env:test',
    'eslint',
    'mocha_istanbul',
  ]);

  grunt.registerTask('build', [
    'env:dev',
    'eslint',
    'stylus',
    'webpack',
    'mocha_istanbul',
    'develop',
  ]);

  // The default task just runs the project on dev
  grunt.registerTask('default', [
    'build',
    'watch',
  ]);
};

我只是从const更改为将导入到我的.js文件中，但此文件未运行。 运行覆盖时，所有问题开始。 请帮帮我。 我一直试图从2天开始解决这个问题。

Answer 1

如果您喜欢冒险并且真的想在Node.js中使用Modules，那么有一种方法。 Node.js 8.5添加了对ES模块的实验性支持 。 有关如何使用它的文档可以在ECMAScript模块中找到。 这里是要领：

• 使用Node.js 8.5或更高版本
• 使用--experimental-modules标志
• 在模块文件上使用.mjs扩展名

Answer 2

虽然import是ES6的一部分，但NodeJS尚不支持它，并且直到最近才在浏览器中可用。 因此，您将必须保留您的require语句。 看到这个以获得更多信息

Answer 3

在webpack配置中使用babel loader和预设将es5转换为es6。 实质上

此外，还要为服务器创建一个webpack条目。 目前，您仅将webpack用于客户端，因此不会编译服务器代码。 服务器配置将类似。 请点击链接，并具体更改其值

target: 'node',

  entry: {
    server: ['babel-polyfill', './src/server.js'],
  }