ES6 模块不适用于 babel 6 和 gulp
ES6 modules not working with babel 6 and gulp
我正在尝试了解如何将模块与 babel 6 和 gulp 一起使用。我创建了一些测试文件
文件a.js
export function test () {
console.log(11111);
}
文件app.js
import {test} from 'a.js';
console.log(test());
文件gulpfile.babel.js
import gulp from 'gulp';
import babel from 'gulp-babel';
import fs from 'fs';
import browserify from 'browserify'
import babelify from 'babelify';
import buffer from 'vinyl-buffer';
import source from 'vinyl-source-stream';
import uglify from 'gulp-uglify';
gulp.task('default', () => {
var bundler = browserify('src/app.js');
bundler.transform(babelify);
bundler.bundle()
.on('error', function (err) { console.error(err); })
.pipe(source('app.js'))
.pipe(buffer())
.pipe(uglify())
.pipe(gulp.dest('dist'));
});
package.json
{
"name": "babel",
"version": "1.0.0",
"description": "",
"main": "index.html",
"dependencies": {
"babel": "^6.5.2",
"babel-preset-es2015": "^6.6.0",
"babelify": "^7.2.0",
"browserify": "^13.0.0",
"fs": "^0.0.2",
"gulp": "^3.9.1",
"gulp-uglify": "^1.5.3",
"gulp-babel": "^6.1.2",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^1.1.0"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
.babelrc
{
"presets": ["es2015"]
}
所以,似乎一切都是正确的,但是当我 运行 gulp
命令时,我看到这个错误 - [错误:无法从 [=45 中找到模块 'a.js' =]]
我不明白为什么会出现这个错误以及如何解决它
在 github 的回购中 - https://github.com/zheleznov/ecma-modules.git
如果引用文件,需要提供模块文件的路径:
... from './a.js';
否则,Node 将在 node_modules/
.
中查找名称为 "a.js" 的模块
顺便说一句,这与 ES6 无关。这就是 Node / browserify 的工作原理。见 Node documentation.
我正在尝试了解如何将模块与 babel 6 和 gulp 一起使用。我创建了一些测试文件
文件a.js
export function test () {
console.log(11111);
}
文件app.js
import {test} from 'a.js';
console.log(test());
文件gulpfile.babel.js
import gulp from 'gulp';
import babel from 'gulp-babel';
import fs from 'fs';
import browserify from 'browserify'
import babelify from 'babelify';
import buffer from 'vinyl-buffer';
import source from 'vinyl-source-stream';
import uglify from 'gulp-uglify';
gulp.task('default', () => {
var bundler = browserify('src/app.js');
bundler.transform(babelify);
bundler.bundle()
.on('error', function (err) { console.error(err); })
.pipe(source('app.js'))
.pipe(buffer())
.pipe(uglify())
.pipe(gulp.dest('dist'));
});
package.json
{
"name": "babel",
"version": "1.0.0",
"description": "",
"main": "index.html",
"dependencies": {
"babel": "^6.5.2",
"babel-preset-es2015": "^6.6.0",
"babelify": "^7.2.0",
"browserify": "^13.0.0",
"fs": "^0.0.2",
"gulp": "^3.9.1",
"gulp-uglify": "^1.5.3",
"gulp-babel": "^6.1.2",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^1.1.0"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
.babelrc
{
"presets": ["es2015"]
}
所以,似乎一切都是正确的,但是当我 运行 gulp
命令时,我看到这个错误 - [错误:无法从 [=45 中找到模块 'a.js' =]]
我不明白为什么会出现这个错误以及如何解决它
在 github 的回购中 - https://github.com/zheleznov/ecma-modules.git
如果引用文件,需要提供模块文件的路径:
... from './a.js';
否则,Node 将在 node_modules/
.
顺便说一句,这与 ES6 无关。这就是 Node / browserify 的工作原理。见 Node documentation.