Question

我在创建一个npm模块时遇到了麻烦，我可以通过其他模块中的es6导入来使用它。

我有一个文件夹＆＃34; 1＆＃34;我在gulp：

的帮助下捆绑了一个简单的js类文件

/1/script.js

export default class npmtest1
{
    static capitalize(string)
    {
        return string.charAt(0).toUpperCase() + string.slice(1);
    }
}

/1/package.json

{
  "name": "npmtest1",
  "version": "1.0.0",
  "main": "script.min.js",
  "license": "MIT",
  "dependencies": {},
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-es2017": "^6.24.1",
    "babel-runtime": "^6.26.0",
    "babelify": "^8.0.0",
    "browserify": "^16.1.1",
    "gulp": "^3.9.1",
    "gulp-connect": "^5.0.0",
    "gulp-uglify": "^3.0.0",
    "uglify": "^0.1.5",
    "vinyl-buffer": "^1.0.0",
    "vinyl-source-stream": "^2.0.0"
  }
}

/1/gulpfile.js

var gulp = require('gulp'),
    babelify = require('babelify'),
    buffer = require('vinyl-buffer'),
    browserify = require('browserify'),
    source = require('vinyl-source-stream'),
    uglify = require('gulp-uglify');        
gulp.task('js', function()
{
    return browserify({
            entries: ['./script.js']
        })
        .transform(babelify.configure({
            presets : ['es2015', 'es2017'],
            plugins : ['transform-runtime']
        }))
        .bundle()
        .on('error', function(err) { console.log(err.toString()); this.emit('end'); })
        .pipe(source('script.min.js'))
        .pipe(buffer())
        .pipe(uglify())
        .pipe(gulp.dest('.'));
});    
gulp.task('default', ['js']);

然后我通过＆＃34; npm publish＆＃34;。

发布这个模块

在另一个文件夹＆＃34; 2＆＃34;我有一个非常类似的设置：

/2/script.js

import npmtest1 from 'npmtest1';
alert(npmtest1.capitalize('foo'));

/2/package.json

{
  "dependencies": {
    "npmtest1": "^1.0.0"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-es2017": "^6.24.1",
    "babel-runtime": "^6.26.0",
    "babelify": "^8.0.0",
    "browserify": "^16.1.1",
    "gulp": "^3.9.1",
    "gulp-connect": "^5.0.0",
    "gulp-uglify": "^3.0.0",
    "uglify": "^0.1.5",
    "vinyl-buffer": "^1.0.0",
    "vinyl-source-stream": "^2.0.0"
  }
}

/2/gulpfile.js

var gulp = require('gulp'),
    babelify = require('babelify'),
    buffer = require('vinyl-buffer'),
    browserify = require('browserify'),
    source = require('vinyl-source-stream'),
    uglify = require('gulp-uglify');

gulp.task('js', function()
{
    return browserify({
            entries: ['./script.js']
        })
        .transform(babelify.configure({
            presets : ['es2015', 'es2017'],
            plugins : ['transform-runtime']
        }))
        .bundle()
        .on('error', function(err) { console.log(err.toString()); this.emit('end'); })
        .pipe(source('script.min.js'))
        .pipe(buffer())
        .pipe(uglify())
        .pipe(gulp.dest('.'));
});

gulp.task('default', ['js']);

当我在一个html文件中嵌入script.min.js时，我收到以下错误：

未捕获的TypeError：i.default.capitalize不是函数

我错过了什么吗？这是一项非常基本的任务。

Answer 1

好的，错误的错误：我尝试导入与browserify / babelify捆绑在一起的模块。

相反，我不得不使用gulp-babel将所有js文件转换为es2015。

发布的npm包es6导入不起作用

1 个答案: