天道酬勤,学无止境

watchify

How to make using tsify with the AMD module system result in a bundle file, not in separate files or a file that uses the not-found `define`?

I do not care which module system I use if I am able to use the ES6 TypeScript import/export syntax. Why does AMD put just main.ts in the bundle.js file, while UMD puts all the needed modules in it? How can I use AMD (which I understood that is good for the browsers) so that the bundle.js file contains all the needed code? I just change between AMD and UMD and the file size changes accordingly: AMD: 1879 bytes written to js/bundle.js (0.06 seconds) at 14:57:28 UMD: 164682 bytes written to js/bundle.js (0.34 seconds) at 14:58:10 If I use UMD, I get a single relevant error in the browser console

2022-03-23 14:42:13    分类:问答    javascript   typescript   bundle   watchify   tsify

gulp browserify reactify task is quite slow

I am using Gulp as my task runner and browserify to bundle my CommonJs modules. I have noticed that running my browserify task is quite slow, it takes around 2 - 3 seconds, and all I have is React and a few very small components I have built for development. Is there a way to speed up the task, or do I have any noticeable problems in my task? gulp.task('browserify', function() { var bundler = browserify({ entries: ['./main.js'], // Only need initial file transform: [reactify], // Convert JSX to javascript debug: true, cache: {}, packageCache: {}, fullPaths: true }); var watcher = watchify

2022-03-11 21:04:51    分类:问答    javascript   gulp   reactjs   browserify   watchify

使用 brfs 监视和捆绑的命令,无需 watchify(Command to watch and bundle using brfs without watchify)

问题 我正在尝试使用brfs转换复制watchify的行为,但我需要直接使用brfs ,因为我想避免在将require与 browserify/watchify 一起使用时添加到脚本中的额外代码。 直接使用brfs只是将require(theFile)替换为其内容,仅此而已。 使用此命令捆绑以下代码会产生我想要的结果: brfs main.js > bundle.js // main.js var fs = require('fs'); var templates = { 'header': fs.readFileSync('app/templates/header.html', 'utf8'), 'nav-menu': fs.readFileSync('app/templates/nav-menu.html', 'utf8') }; 如何设置一些东西来观察变化,并在发生变化时让brfs再次捆绑脚本? 回答1 我认为这种使用brfs编程 api 的方法是最合适的。 与我们在 js 聊天中讨论的示例的唯一区别是您需要使用fs.createReadStream将文件通过管道传输到brfs ,而不是像我们一样将文件名直接传递给brfs 。 var gulp = require('gulp'); var brfs = require('brfs'); var fs = require(

2022-01-24 13:53:54    分类:技术分享    javascript   watchify   brfs

Command to watch and bundle using brfs without watchify

I'm trying to replicate the behavior of watchify with the brfs transform, but I need to use brfs directly because I want to avoid the additional code added to the script when using require with browserify/watchify. Using brfs directly simply replaces require(theFile) with its contents and nothing else. Using this command to bundle the following code produces my intended result: brfs main.js > bundle.js // main.js var fs = require('fs'); var templates = { 'header': fs.readFileSync('app/templates/header.html', 'utf8'), 'nav-menu': fs.readFileSync('app/templates/nav-menu.html', 'utf8') }; How do

2022-01-24 10:11:50    分类:问答    javascript   watchify   brfs

谁能告诉我为什么我会收到这个错误?(Can anyone let me know why am I getting this error?)

问题 我刚开始学习ReactJS用NodeJS并试图通过运行一个应用程序NPM ,但恰到好处的开始,我收到以下错误为: You MUST specify an outfile with -o. 我的启动命令: watchify src/main.jsx -v -t [ babelify --presets [ react ]] -o public/js/main.js 整个错误: C:\Users\Umair Shah Yousafzai\react-skeleton>npm start > react-skeleton@1.0.0 start C:\Users\Umair Shah Yousafzai\react-skeleton > watchify src/main.jsx -v -t [ babelify --presets [ react ]] -o public/js/main.js You MUST specify an outfile with -o. npm ERR! Windows_NT 10.0.10240 npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "start" npm ERR! node

2021-11-21 17:43:30    分类:技术分享    javascript   node.js   reactjs   npm   watchify

Can anyone let me know why am I getting this error?

I am just starting to learn ReactJS with NodeJS and trying to run an application through NPM but just right on start I am getting the following error as : You MUST specify an outfile with -o. My Starting Command : watchify src/main.jsx -v -t [ babelify --presets [ react ]] -o public/js/main.js Whole Error : C:\Users\Umair Shah Yousafzai\react-skeleton>npm start > react-skeleton@1.0.0 start C:\Users\Umair Shah Yousafzai\react-skeleton > watchify src/main.jsx -v -t [ babelify --presets [ react ]] -o public/js/main.js You MUST specify an outfile with -o. npm ERR! Windows_NT 10.0.10240 npm ERR

2021-11-14 04:37:10    分类:问答    javascript   node.js   reactjs   npm   watchify

使用 watchify 制作捆绑包后出现 blob 错误(get blob error after using watchify to make a bundle)

问题 我正在尝试做什么? 我想使用节点模块和 es6 javascript 语法创建一个项目。 为了使其尽可能模块化和独立,我决定切换到 watchify。 我的 html 页面看起来像这样 ...some unrelated html code <dib id='content'></div> <script type='text/javascript' src='correct(checked) path to my bundle.js file'></script> ...some unrelated html code 我的 whatchify 命令看起来像这样 watchify src/app.js -o destination/bundle.js -t [babelify --presets [ es2015 ] ] 而我的家属看起来像这样 看起来像这样 "dependencies": { "bluebird": "^3.5.1", "jquery": "^3.3.1", "three": "^0.92.0", "three-obj-exporter": "0.0.1", "three-obj-loader": "^1.1.3" }, "devDependencies": { "babel-cli": "^6.26.0", "babel-core": "^6.26.3"

2021-10-23 09:38:41    分类:技术分享    javascript   ecmascript-6   watchify

Browserify watchify 使用 VueComponent 在本地主机上编译旧资源(Browserify watchify compile old ressource on localhost with VueComponent)

问题 我对编译器和 npm 命令很陌生。 我将此启动器用于项目 https://github.com/vuejs-templates/browserify-simple 我为我的项目提供服务,并且在更新脚本时我正在处理(我正在使用单个文件组件 - VueJS),现在由于旧脚本,输出“dist.js”仍然出错。 我已经重新安装,创建了一个新项目,我复制了我的新源,当我启动命令“npm run dev”时,由于脚本不再存在,我遇到了同样的错误。 TypeError: Cannot convert undefined or null to object at Function.values (<anonymous>) at http://localhost:8080/dist/build.js:35858:32 at Array.filter (native) at VueComponent.userLigues “VueCompnent.userLigues”在我的新代码中不再存在。 这是我明天晚上必须解决的真正问题:( 提前致谢 !

2021-10-15 22:42:44    分类:技术分享    vue.js   browserify   watchify

Watchify + tsify + Visual Studio == 过时的代码(Watchify + tsify + Visual Studio == stale code)

问题 我们在 Visual Studio (2015) 中运行 Gulp 任务来执行 watchify。 有时效果很好,但有时 watchify 会构建旧代码。 复述: 在 Visual Studio 中修改 .ts 文件节省在 Task Runner Explorer 中,观察 watchify 输出,表明它已运行(确实如此) 刷新 Chrome/清除缓存(我在 Chrome 中使用“调试窗口打开时禁用缓存”选项) 在 Chrome Debugger 中查看源代码(不到一半的时间,它会是旧代码) 知道我需要寻找什么吗? 请注意,如果我执行完整的 browserify 构建,Chrome 总是会看到新代码——这种陈旧问题仅在混合使用 Watchify 时发生。

2021-10-10 17:06:16    分类:技术分享    typescript   gulp   browserify   watchify   tsify