NPM 模块在导入时抛出错误答案

【问题标题】：NPM module throws an error when being importedNPM 模块在导入时抛出错误
【发布时间】：2016-12-07 20:56:04
【问题描述】：

我一直在尝试让以下模块在 react/webpack 应用程序上工作：

https://github.com/ripjar/material-datetime-picker

每当我导入模块时，我的服务器都不会启动，并且会因语法错误而崩溃：Uncaught SyntaxError: Unexpected token import。

似乎在整个模块代码中它都使用 es6 来导入/导出，但是当我尝试安装并将其导出到我自己的文件中时，每一行都会破坏模块。

我已尝试查看模块的源代码以及独立版本，但都无法正常工作 - 但是 - 我知道该模块在独立的 HTML 文件中工作，因为当我在本地下载它时，他们的演示仍然有效.

这可能与 webpack 不兼容有关吗？我一直在与一位高级开发人员一起使用他们的代码，但我们似乎根本无法加载该模块。

【问题讨论】：

听起来你没有正确配置 babel。确保启用了 es2015 预设。
我在我自己的应用程序中有这个预设。我也导入了相当多的模块。该模块的源代码中的导入发生语法错误

标签： javascript reactjs import npm webpack

【解决方案1】：

显然你正在尝试导入 es6 模块而不使用像 Babel 这样的 es6 编译器

如果您打算将它与 CommonJS 一起使用，您应该考虑使用 require 添加它：

var MaterialDateTimePicker = require('material-datetime-picker');

【讨论】：

我正在为我的代码使用 babgel 编译器，并在整个项目中导入 es6 模块。实际错误来自模块本身的源代码，而不是我的代码。

【解决方案2】：

我相信您正在将此模块/js 用于前端（浏览器）。我会建议在你的构建环境中使用 babelify。您可以查看给定链接中的文档。

webpack-for-browserify-users

babeljs.io-installation

babel/babelify

通天塔改造--

var fs = require("fs"); var browserify = require("browserify");
var babelify = require("babelify");

browserify({ debug: true })   
    .transform(babelify)   
    .require("./script.js", { entry: true })   
    .bundle()   
    .on("error", function (err) { 
        console.log("Error: " + err.message); 
    }).pipe(fs.createWriteStream("bundle.js"));

【讨论】：