ES6功能强大

时间:2017-10-30 19:58:58

标签: javascript node.js ecmascript-6 ecmascript-5

您好我需要更改需要导入语句。我的所有文件都支持箭头函数和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文件,但这没有运行。当运行覆盖时,所有问题都开始了。 请帮帮我。我一直在努力解决这个问题。

3 个答案:

答案 0 :(得分:3)

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

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

答案 1 :(得分:0)

虽然import是ES6的一部分,但NodeJS尚不支持它,并且最近才在浏览器中提供。因此,您必须保留require语句。有关详细信息,请参阅this

答案 2 :(得分:0)

在webpack配置中使用babel loader和presets将es5转换为es6。 Essentially

此外,还要为服务器创建一个webpack条目。目前,您只使用webpack作为客户端,因此不会发现严重的代码。服务器配置将类似。请点击链接,并特别对其值进行以下更改

target: 'node',

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