我应该排除模块化Typescript项目的依赖项吗?
我目前正在尝试为一个Typescript项目创建一个NPM包(我正在使用gulp和browserify构建)。问题是包使用者当前没有使用模块,因此我尝试使用Browserify打包一个独立的包 首先也是最重要的一点是,捆绑所有依赖项是否会成为一个问题?据我所知,捆绑的js文件只是将我的依赖项(three和hammerjs)包装到全局名称空间中。我的软件包使用者有另一个包含hammerjs的组件(几乎相同的版本),所以我怀疑最后包含的组件将定义什么样的hammerjs软件包可用于我的应用程序?其他以独立方式工作的NPM包如何处理这个问题 我发现Browserify可以通过将bundleExternal设置为false或通过逐个排除依赖项,然后在浏览器中包含这些库来排除依赖项。这不起作用,我在控制台中遇到“找不到模块'hammerjs'”错误。我发现了以及如何分别浏览所有的依赖项,这也起到了作用,但从我所知,这与简单地将它们捆绑在一起是一样的,因为我不能简单地从他们的网站中包含hammer.min.js文件 TL;博士我应该排除模块化Typescript项目的依赖项吗?,typescript,npm,browserify,Typescript,Npm,Browserify,我目前正在尝试为一个Typescript项目创建一个NPM包(我正在使用gulp和browserify构建)。问题是包使用者当前没有使用模块,因此我尝试使用Browserify打包一个独立的包 首先也是最重要的一点是,捆绑所有依赖项是否会成为一个问题?据我所知,捆绑的js文件只是将我的依赖项(three和hammerjs)包装到全局名称空间中。我的软件包使用者有另一个包含hammerjs的组件(几乎相同的版本),所以我怀疑最后包含的组件将定义什么样的hammerjs软件包可用于我的应用程序?其他
捆绑模块化Typescript NPM包并处理不支持模块的应用程序中使用的依赖项的正确方法是什么?要构建一个工作的NPM包,您需要按照
包.json中指定的路径交付模块。
通常,这应该在dist/my main class.js
中
因此,在我的src
中,我有一个类/模块/命名空间,它代表我的项目:
class MyMainClass{
static myMethod = function(){
console.log('hello');
}
}
在文件的末尾,我有这样一个:export=MyMainClass代码>
如果我发布名为MyMainClass的包:$npm publish MyMainClass
,我的用户只需使用以下命令即可导入该包:
let MyMainClass = require('MyMainClass');
MyMainClass.myMethod();
不要忘记在发布之前构建。
这就是我如何确保我永远不会忘记:
"build": "tsc -p .",
"prepublish": "npm run build",
如果你想缩小你的代码或做其他事情,你可以在发布前使用gulp/webpack,并锁定你的dist文件夹
"minify": "gulp/grunt/webpack minify dist/**.js",
"build": "tsc -p .",
"prepublish": "npm run build && npm run minify",
我仍然不确定处理依赖关系的最佳方法,但我选择的路线是创建一个mylib.js和一个mylib.min.js,它们分布在npm包中,不包含任何依赖关系。除了分布式js文件之外,我还以模块化的形式提供了这个库,例如browserify。browserify的问题是,我试图排除库的输出仍然依赖于某种形式的需求,当我尝试webpack时,它是开箱即用的
我包括了完整的构建脚本以供参考
文件结构
├───dist // Output folder for all my distributable standalone js files
│ ├───mylib.d.ts // Manually writtes declaration file
│ ├───myLib.js // Distributable without dependencies
│ └───myLib.min.js // Compressed distributable without dependencies
├───lib
│ ├───myLib.js // Compiled src
│ └───myLib.d.ts // Compiled d.ts
├───src // Folder containing my Typescript src
├───tests // Output folder for my tests
└───testSrc // Src folder for my test code
├───test.html
└───unittests
package.json
{
"name": "mylib",
"version": "0.0.0",
"private": true,
"scripts": {
"build": "gulp compile && gulp webpack",
"prepublish": "gulp prepublish"
},
"main": "lib/mylib.js",
"typings": "lib/mylib",
"dependencies": {
"@types/es6-promise": "0.0.32",
"@types/hammerjs": "2.0.33",
"@types/three": "0.0.24",
"es6-promise": "4.0.5",
"hammerjs": "2.0.8",
"three": "0.82.1"
},
"devDependencies": {
"@types/jasmine": "2.5.37",
"gulp": "3.9.1",
"gulp-cli": "1.2.2",
"gulp-concat": "2.6.0",
"gulp-copy": "0.0.2",
"gulp-jasmine": "2.4.2",
"gulp-preprocess": "2.0.0",
"gulp-typescript": "3.1.2",
"jasmine": "2.5.2",
"ts-loader": "1.0.0",
"typescript": "2.0.6",
"webpack-stream": "3.2.0"
}
}
Gulpfile.js
var gulp = require('gulp');
var ts = require('gulp-typescript');
// Create projects from tsconfig.json
var tsProject = ts.createProject('tsconfig.json');
var mainTestTsProject = ts.createProject('testSrc/tsconfig.json');
var jasmineTsProject = ts.createProject('testSrc/unittests/tsconfig.json');
// External build libraries
var jasmine = require("gulp-jasmine");
var concat = require("gulp-concat");
var copy = require("gulp-copy");
var preprocess = require("gulp-preprocess");
var webpack = require("webpack-stream");
// Compile the modular library
gulp.task('compile', function () {
return tsProject.src()
.pipe(tsProject())
.pipe(gulp.dest("lib"));
});
// Pack and distribute
gulp.task('webpack', function (callback) {
var config = require("./webpack.config.js");
return tsProject.src()
.pipe(webpack(config))
.pipe(gulp.dest('./dist'))
});
// Pre-process the test.html
gulp.task('preprocessMainHtml', function () {
return gulp.src('./testSrc/*.html')
.pipe(preprocess({ context: { CURRENT_TIMESTAMP: Date.now() } }))
.pipe(gulp.dest('./tests/'));
});
// Copy output libraries for testing
gulp.task('copyLibs', function () {
return gulp.src(['./dist/*.js', './dist/*.map'])
.pipe(copy('./tests', { prefix: 1 }));
});
// Compile the test-html main javascript file
gulp.task('compileMainTest', ['copyLibs', 'preprocessMainHtml'], function (callback) {
return mainTestTsProject.src()
.pipe(mainTestTsProject())
.pipe(concat('mylib-test.js'))
.pipe(gulp.dest("tests"));
});
gulp.task('prepublish', ['compile', 'webpack']);
gulp.task('test', ['compile'], function () {
return jasmineTsProject.src()
.pipe(jasmineTsProject())
.pipe(gulp.dest("tests/unittests"))
.pipe(jasmine());
});
gulp.task("default", ['webpack', 'compileMainTest']);
webpack.config.js
module.exports = {
resolve: {
extensions: ['', '.js', '.ts', '.tsx']
},
module: {
loaders: [
{ test: /\.tsx?$/, loader: 'ts' },
]
},
externals: {
"hammerjs": "Hammer",
"three": "THREE"
},
entry: {
"MyLib": ['./src/mylib.ts'],
},
output: {
path: __dirname + '/dist',
filename: 'mylib.js',
libraryTarget: "umd",
library: 'MyLib'
},
devtool: 'source-map',
debug: true
}
手工编写的声明文件
// Manually maintained declaration file
// External references
/// <reference types="hammerjs" />
/// <reference types="three" />
// This namespace should map to what is exported in the Gruntfile.js
export as namespace MyLib;
export declare class MyMainClass {
constructor(a: string);
}
//手动维护的声明文件
//外部参照
///
///
//此命名空间应映射到GrunFile.js中导出的内容
导出为名称空间MyLib;
导出声明类MyMainClass{
构造函数(a:string);
}
test.html中的Js src
<!-- All mylib.js dependencies -->
<script src="../node_modules/three/build/three.js?_=<!-- @echo CURRENT_TIMESTAMP -->"></script>
<script src="../node_modules/hammerjs/hammer.js?_=<!-- @echo CURRENT_TIMESTAMP -->"></script>
<!-- mylib.js library -->
<script src="./mylib.js?_=<!-- @echo CURRENT_TIMESTAMP -->"></script>
<!-- mylib.js test source -->
<script src="./mylib-test.js?_=<!-- @echo CURRENT_TIMESTAMP -->"></script>
谢谢你的回复!我必须使用es5,所以我想你的意思是正确的方法是在我的消费应用程序中包含requirejs?在您的示例中,您没有缩小任何内容,我假设这不需要句柄,在导出到dist/my-main-class.js之前,我应该进行一些缩小?但是,当我尝试像现在这样捆绑和缩小所有内容时,我不会遇到同样的问题吗?没有必要缩小,除非它将用于客户端。如果需要,请确保同时提供:MyMainClass.js和MyMainClass.min.js因为我的主应用程序目前的结构我不想使用require,所以我只想包括这个组件,因为我已经将所有其他组件作为独立的js文件包括在内。尽管我认为您的解决方案更符合我未来的目标,所以我确保可以使用browserify或类似工具使用此组件。我用完整的答案回答了自己的问题。我仍在研究如何进行缩小,但我觉得这有点超出了我最初的问题的范围。我写了一篇博客文章,其中附有如何实现这一点的链接示例: