符合 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 更改为 import 到我的 .js 文件中，但这没有运行。当运行覆盖范围时，所有问题都开始了。 请帮帮我。我从 2 天开始就一直在尝试解决这个问题。

Answer 1

如果您喜欢冒险并且真的想在 Node.js 中使用模块，那么有一种方法。 Node.js 8.5 added experimental support for ES Modules。关于如何使用它的文档可以在ECMAScript Modules 中找到。以下是要点：

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

Answer 2

虽然import 是 ES6 的一部分，但 NodeJS 尚不支持它，并且最近才在浏览器中可用。所以你必须保留你的require 声明。请参阅this 了解更多信息

Answer 3

在你的 webpack 配置中使用 babel 加载器和预设来将 es5 转换为 es6。 Essentially

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

target: 'node',

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