从模块导入 class
Importing class from module
我正在尝试从我想在浏览器中使用的模块中导入 class。为此,我创建了一个 MCVE 来检查我的理解,尽管我得到了一个
Uncaught SyntaxError: The requested module './test-class-bundle.js' does not provide an export named 'TestClass'
错误。
我的 MCVE 包括以下内容:
(1) 定义和导出 class TestClass
.
的 test-class.js
(2) 我用npm
和gulp
到browsify
和babalify
test-class.js
.
(3) example1.html
是我用来测试的。
测试-class.js
export class TestClass {
constructor(greeting){
this.greeting = greeting;
}
greet(){
console.log(this.greeting);
}
}
package.json
{
"name": "test-class",
"version": "1.0.0",
"description": "",
"main": "src/js/test-class.js",
"directories": {
"test": "test"
},
"scripts": {
"build": "gulp",
"copyTests": "gulp copyTests",
"startServer": "gulp startServer",
"check": "gulp check"
},
"devDependencies": {
"babel-preset-es2015": "^6.24.1",
"babelify": "8.0.0",
"browserify": "^16.2.3",
"gulp": "^4.0.2",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"del": "^4.1.1",
"gulp-rename": "^1.4.0",
"gulp-connect": "^5.7.0",
"vinyl-source-stream": "^2.0.0",
"webpack": "^4.35.0"
}
}
gulpfile.js
//Include required modules
var gulp = require("gulp"),
babelify = require('babelify'),
browserify = require("browserify"),
source = require("vinyl-source-stream"),
connect = require('gulp-connect');
// Convert ES6 code in all js files in src/js folder and copy to
// build folder as bundle.js
gulp.task("build", function(){
return browserify({
entries: ["./src/js/test-class.js"]
})
.transform(babelify.configure({
presets : ["es2015"]
}))
.bundle()
.pipe(source("test-class-bundle.js"))
.pipe(gulp.dest("./build"));
});
//Copy static files from html folder to build folder
gulp.task("copyTests", function(){
return gulp.src("./test/html/*.*")
.pipe(gulp.dest("./build"));
});
//Start a test server with doc root at build folder and
//listening to 9001 port. Home page = http://localhost:9001
gulp.task("startServer", function(){
connect.server({
root : "./build",
livereload : true,
port : 9001
});
});
//Default task. This will be run when no task is passed in arguments to gulp
gulp.task("default", gulp.series("build", "copyTests"));
gulp.task("check", gulp.series("build", "copyTests", "startServer"));
example1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
</head>
<body>
<div><h2>Test</h2></div>
<script type="module">
import {TestClass} from "./test-class-bundle.js";
let testClass = new TestClass("Please work, pretty please!");
testClass.greet();
</script>
</body>
</html>
目录结构
/build
/src
/js
test-class.js
/test
/html
example1.html
我通过 运行 npm run check
对此进行了测试,它在 localhost:9001
上启动了一个服务器,当从我的浏览器访问它时,会导致控制台日志中出现给定的错误。
我已经 10 多年没有使用 Javascript 了,其中很多内容对我来说都是全新的。如果有人能启发我,我将非常感激。谢谢!
根据您必须支持的浏览器,您实际上并不需要 Gulp、Browserify 和 Babel。尝试直接导入 JS 文件而不是包,它适用于所有现代浏览器(Edge、Firefox、Chrome、Safari):
example1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
</head>
<body>
<div><h2>Test</h2></div>
<script type="module">
import {TestClass} from "./test-class.js";
let testClass = new TestClass("Please work, pretty please!");
testClass.greet();
</script>
</body>
</html>
如果您必须支持 Internet Explorer 11 及更早版本,则根本无法使用 <script type="module">
。
我正在尝试从我想在浏览器中使用的模块中导入 class。为此,我创建了一个 MCVE 来检查我的理解,尽管我得到了一个
Uncaught SyntaxError: The requested module './test-class-bundle.js' does not provide an export named 'TestClass'
错误。
我的 MCVE 包括以下内容:
(1) 定义和导出 class TestClass
.
test-class.js
(2) 我用npm
和gulp
到browsify
和babalify
test-class.js
.
(3) example1.html
是我用来测试的。
测试-class.js
export class TestClass {
constructor(greeting){
this.greeting = greeting;
}
greet(){
console.log(this.greeting);
}
}
package.json
{
"name": "test-class",
"version": "1.0.0",
"description": "",
"main": "src/js/test-class.js",
"directories": {
"test": "test"
},
"scripts": {
"build": "gulp",
"copyTests": "gulp copyTests",
"startServer": "gulp startServer",
"check": "gulp check"
},
"devDependencies": {
"babel-preset-es2015": "^6.24.1",
"babelify": "8.0.0",
"browserify": "^16.2.3",
"gulp": "^4.0.2",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"del": "^4.1.1",
"gulp-rename": "^1.4.0",
"gulp-connect": "^5.7.0",
"vinyl-source-stream": "^2.0.0",
"webpack": "^4.35.0"
}
}
gulpfile.js
//Include required modules
var gulp = require("gulp"),
babelify = require('babelify'),
browserify = require("browserify"),
source = require("vinyl-source-stream"),
connect = require('gulp-connect');
// Convert ES6 code in all js files in src/js folder and copy to
// build folder as bundle.js
gulp.task("build", function(){
return browserify({
entries: ["./src/js/test-class.js"]
})
.transform(babelify.configure({
presets : ["es2015"]
}))
.bundle()
.pipe(source("test-class-bundle.js"))
.pipe(gulp.dest("./build"));
});
//Copy static files from html folder to build folder
gulp.task("copyTests", function(){
return gulp.src("./test/html/*.*")
.pipe(gulp.dest("./build"));
});
//Start a test server with doc root at build folder and
//listening to 9001 port. Home page = http://localhost:9001
gulp.task("startServer", function(){
connect.server({
root : "./build",
livereload : true,
port : 9001
});
});
//Default task. This will be run when no task is passed in arguments to gulp
gulp.task("default", gulp.series("build", "copyTests"));
gulp.task("check", gulp.series("build", "copyTests", "startServer"));
example1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
</head>
<body>
<div><h2>Test</h2></div>
<script type="module">
import {TestClass} from "./test-class-bundle.js";
let testClass = new TestClass("Please work, pretty please!");
testClass.greet();
</script>
</body>
</html>
目录结构
/build
/src
/js
test-class.js
/test
/html
example1.html
我通过 运行 npm run check
对此进行了测试,它在 localhost:9001
上启动了一个服务器,当从我的浏览器访问它时,会导致控制台日志中出现给定的错误。
我已经 10 多年没有使用 Javascript 了,其中很多内容对我来说都是全新的。如果有人能启发我,我将非常感激。谢谢!
根据您必须支持的浏览器,您实际上并不需要 Gulp、Browserify 和 Babel。尝试直接导入 JS 文件而不是包,它适用于所有现代浏览器(Edge、Firefox、Chrome、Safari):
example1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
</head>
<body>
<div><h2>Test</h2></div>
<script type="module">
import {TestClass} from "./test-class.js";
let testClass = new TestClass("Please work, pretty please!");
testClass.greet();
</script>
</body>
</html>
如果您必须支持 Internet Explorer 11 及更早版本,则根本无法使用 <script type="module">
。