Typescript 通过命令行从Gulp但从Rollup-stream包生成捆绑包
Typescript 通过命令行从Gulp但从Rollup-stream包生成捆绑包,typescript,gulp,child-process,rollupjs,Typescript,Gulp,Child Process,Rollupjs,使用汇总流包时,im收到以下错误: [10:01:14] Using gulpfile ~/myUser/myProjectFolder/myTestProject/gulpfile.js [10:01:14] Starting 'default'... [10:01:14] Starting 'transpile-it'... [10:01:16] Finished 'transpile-it' after 2.11 s [10:01:16] Starting 'bundle-
使用汇总流包时,im收到以下错误:
[10:01:14] Using gulpfile ~/myUser/myProjectFolder/myTestProject/gulpfile.js
[10:01:14] Starting 'default'...
[10:01:14] Starting 'transpile-it'...
[10:01:16] Finished 'transpile-it' after 2.11 s
[10:01:16] Starting 'bundle-it'...
[10:01:16] 'bundle-it' errored after 31 ms
[10:01:16] TypeError: parse is not a function in /home/myUser/myProjectFolder/myTestProject/obj/main.js
at error (/home/myUser/myProjectFolder/myTestProject/node_modules/rollup/dist/rollup.js:185:14)
at Promise.resolve.then.catch.err (/home/myUser/myProjectFolder/myTestProject/node_modules/rollup/dist/rollup.js:9182:6)
at <anonymous>
at process._tickDomainCallback (internal/process/next_tick.js:228:7)
[10:01:16] 'default' errored after 2.15 s
以及以下gulpfile.js:
var gulp = require('gulp');
var rollup = require('rollup-stream');
var source = require('vinyl-source-stream');
var commonjs = require('rollup-plugin-commonjs');
var resolve = require('rollup-plugin-node-resolve');
var copy = require('rollup-plugin-copy');
var ts = require('gulp-typescript');
var tsProject = ts.createProject('tsconfig.json');
gulp.task('transpile-it', function () {
return tsProject.src()
.pipe(tsProject())
.pipe(gulp.dest('obj'));
});
gulp.task('bundle-it', function () {
return rollup({
exports: 'named',
sourcemap: false,
input: 'obj/main.js',
format: 'cjs',
plugins: [
commonjs(),
resolve({
extensions: ['.js', '.json', '.flt']
}),
copy({
"node_modules/asciify/lib/figlet-js/fonts/short.flf": "prd/fonts/short.flf",
verbose: true
})
]
})
.pipe(source('main.js'))
.pipe(gulp.dest('./prd'));
});
gulp.task('default', gulp.series('transpile-it', 'bundle-it'));
为了解决这个问题,我改为使用child_进程包和下面的rollup.config.js文件直接调用rollup,并且一切正常:
import commonjs from 'rollup-plugin-commonjs';
import resolve from 'rollup-plugin-node-resolve';
import copy from 'rollup-plugin-copy';
export default {
exports: 'named',
sourceMap: true,
input: 'obj/main.js',
output: {
file: './prd/main.js',
format: 'cjs'
},
plugins: [
commonjs(),
resolve({
extensions: [ '.js', '.json', '.flt' ],
}),
copy({
"node_modules/asciify/lib/figlet-js/fonts/short.flf": "prd/fonts/short.flf",
verbose: true
})
]
};
gulpfile.js文件变为:
var gulp = require('gulp');
var ts = require('gulp-typescript');
var tsProject = ts.createProject('tsconfig.json');
var cp = require('child_process');
gulp.task('transpile-it', function () {
return tsProject.src()
.pipe(tsProject())
.pipe(gulp.dest('obj'));
});
gulp.task('bundle-it', function () {
const child = cp.exec('rollup -c', [], (error, stdout, stderr) => {
if (error) {
throw error;
}
let logIfNotNull = function (value) {
if (Boolean(value)) {
console.log(value);
}
}
logIfNotNull(error);
logIfNotNull(stderr);
logIfNotNull(stdout);
});
return child;
});
gulp.task('default', gulp.series('transpile-it', 'bundle-it'));
配置是一样的,我只是用shell调用,没有用rollup-stream包,rollup-stream包有什么问题吗
要复制的完整脚本:
mkdir -p myTestProject/{obj,prd,src/M}
cd myTestProject
npm init -y
npm install -D typescript gulp gulp-typescript @types/node rollup-stream vinyl-source-stream rollup-plugin-commonjs rollup-plugin-node-resolve rollup-plugin-copy
npm install -D gulp@next
npm install -S asciify
cat <<EOT> ./tsconfig.json
{
"compilerOptions": {
"target": "ES5",
"module": "commonjs",
"strict": true,
"sourceMap": true,
"allowSyntheticDefaultImports": true
}
}
EOT
cat <<EOT> ./gulpfile.js
var gulp = require('gulp');
var rollup = require('rollup-stream');
var source = require('vinyl-source-stream');
var commonjs = require('rollup-plugin-commonjs');
var resolve = require('rollup-plugin-node-resolve');
var copy = require('rollup-plugin-copy');
var ts = require('gulp-typescript');
var tsProject = ts.createProject('tsconfig.json');
gulp.task('transpile-it', function () {
return tsProject.src()
.pipe(tsProject())
.pipe(gulp.dest('obj'));
});
gulp.task('bundle-it', function () {
return rollup({
exports: 'named',
sourcemap: false,
input: 'obj/main.js',
format: 'cjs',
plugins: [
commonjs(),
resolve({
extensions: ['.js', '.json', '.flt']
}),
copy({
"node_modules/asciify/lib/figlet-js/fonts/short.flf": "prd/fonts/short.flf",
verbose: true
})
]
})
.pipe(source('main.js'))
.pipe(gulp.dest('./prd'));
});
gulp.task('default', gulp.series('transpile-it', 'bundle-it'));
EOT
cat <<EOT> ./src/M/AuxClass.ts
class AuxClass{
getMessage(){
return "Class Works!";
}
}
export { AuxClass }
EOT
cat <<EOT> ./src/main.ts
import { AuxClass } from "./M/AuxClass"
export class main {
init() {
let a = new AuxClass();
let text = a.getMessage();
let fontName = "short";
let callback = function(err: any, value: any): void {
if (err != null) {
console.log(err);
}
console.log(value);
};
var asciify = require("./../node_modules/asciify/index.js");
asciify(text, fontName, callback);
}
}
let m = new main();
m.init();
EOT
mkdir-pmytestproject/{obj,prd,src/M}
cd myTestProject
npm init-y
npm安装-D typescript gulp gulp typescript@types/node汇总流乙烯基源流汇总插件commonjs汇总插件节点解析汇总插件副本
npm安装-Dgulp@next
npm安装-S ascify
cat您必须将rollup plugin commonjs
回滚到8.4.1。这为我解决了问题。那么,在main.js中,不是函数的parse
是什么呢?在所有工作流中都没有“parse”,包括导致此错误的代码,复制上面添加的错误的脚本,“parse”看起来在汇总包代码中,可能transpiler正在将typescript上的某些内容转换为“parse”.我建议尝试删除插件并检查它如何工作。您还可以尝试通过查找最简单的代码来创建最小的复制示例,这会产生错误。现在使用:npm安装-D typescript gulp gulp typescript@types/node rollup stream乙烯基源流rollup plugin-commonjs@8.4.1rollup plugin节点解析rollup plugin copy回滚到8.4.1也对我有用。有人能解释一下为什么这样可以解决问题吗?谢谢。9.0.0作为一个对等依赖项进行了汇总,不知何故导致了这个错误。
mkdir -p myTestProject/{obj,prd,src/M}
cd myTestProject
npm init -y
npm install -D typescript gulp gulp-typescript @types/node rollup-stream vinyl-source-stream rollup-plugin-commonjs rollup-plugin-node-resolve rollup-plugin-copy
npm install -D gulp@next
npm install -S asciify
cat <<EOT> ./tsconfig.json
{
"compilerOptions": {
"target": "ES5",
"module": "commonjs",
"strict": true,
"sourceMap": true,
"allowSyntheticDefaultImports": true
}
}
EOT
cat <<EOT> ./gulpfile.js
var gulp = require('gulp');
var rollup = require('rollup-stream');
var source = require('vinyl-source-stream');
var commonjs = require('rollup-plugin-commonjs');
var resolve = require('rollup-plugin-node-resolve');
var copy = require('rollup-plugin-copy');
var ts = require('gulp-typescript');
var tsProject = ts.createProject('tsconfig.json');
gulp.task('transpile-it', function () {
return tsProject.src()
.pipe(tsProject())
.pipe(gulp.dest('obj'));
});
gulp.task('bundle-it', function () {
return rollup({
exports: 'named',
sourcemap: false,
input: 'obj/main.js',
format: 'cjs',
plugins: [
commonjs(),
resolve({
extensions: ['.js', '.json', '.flt']
}),
copy({
"node_modules/asciify/lib/figlet-js/fonts/short.flf": "prd/fonts/short.flf",
verbose: true
})
]
})
.pipe(source('main.js'))
.pipe(gulp.dest('./prd'));
});
gulp.task('default', gulp.series('transpile-it', 'bundle-it'));
EOT
cat <<EOT> ./src/M/AuxClass.ts
class AuxClass{
getMessage(){
return "Class Works!";
}
}
export { AuxClass }
EOT
cat <<EOT> ./src/main.ts
import { AuxClass } from "./M/AuxClass"
export class main {
init() {
let a = new AuxClass();
let text = a.getMessage();
let fontName = "short";
let callback = function(err: any, value: any): void {
if (err != null) {
console.log(err);
}
console.log(value);
};
var asciify = require("./../node_modules/asciify/index.js");
asciify(text, fontName, callback);
}
}
let m = new main();
m.init();
EOT