如何使用 Budo 开发服务器定义 coffeeify 的扩展?
How do I define an extension for coffeeify with Budo dev server?
我正在尝试将 coffeeify 与 budo 一起使用,因此我不必将扩展添加到我的 require 语句中。我尝试通过 budo 的 browserify 选项传递这些命令
budo src/app.coffee --live --serve bundle.js -- -t coffeeify --extension=".coffee"
budo src/app.coffee --live --serve bundle.js -- -t [coffeeify --extension=".coffee"]
我还尝试将 browserify 转换插入我的 package.json
"browserify: {
"transform": ["coffeeify", {"extension": ".coffee"}]
}
这是对我有用的东西(我花了很长时间才弄明白,最困难的部分是让 watchify 与 coffeescript 一起工作)。 一切都在package.yaml。从您的顶级文件夹调用 npm start
,它就可以解决问题。 npm 将所有本地安装的节点二进制文件放入您的 PATH 中(它们通常位于 node_modules/.bin
下)。
{
"name": "my-package",
"version": "1.0.0",
"private": true,
"scripts": {
"start": "(cd src; budo app.coffee:bundle.js --dir . --live --verbose -- --extension=.coffee | garnish)"
},
"browserify": {
"extension": [ ".coffee" ],
"transform": [ ["coffeeify"], ["brfs"] ]
},
"devDependencies": {
"brfs": "1.4.1",
"browserify": "11.1.0",
"budo": "^5.1.5",
"coffee-script": "latest",
"coffeeify": "^1.1.0",
"garnish": "^3.2.1",
"watchify": "3.4.0"
}
}
我的源代码位于 src 文件夹下,还有一个名为 app.coffee 的文件,其中包含(或 node.js 术语中的 require
)我的整个应用程序。我的 src 文件夹中有一个 index.html,它通过 html script
标签引用 bundle.js。
- 启动武道的命令在我的package.json里面。它首先进入我的 src 文件夹。
- 诀窍是在 browserify 块中指定一些配置:扩展名 .coffee 需要存在,以及转换列表。我尝试在命令行上设置所有内容,但从未成功
- 调用
npm start
后,因为我将 --live
参数传递给 budo
,所以一切都像魔术一样工作,edit/saves 我的文档确实会触发浏览器 reload/refresh.
要部署或发布,您可能需要另一个目标以使用 uglify.js 缩小。我仍然有一个分两步手动完成的脚本,第一步调用 browserify,第二步明确调用 uglify.js。
顺便说一下,我听说最新版本的 budo 会为您装饰管道。
另一个技巧是查看 React 人员正在做什么来转换他们的 .jsx 文件,因为它在理论上非常接近 coffeescript 人员需要做的事情。 React 似乎有着巨大的发展势头,所以希望 React 的人会首先解决这些构建问题。
我正在尝试将 coffeeify 与 budo 一起使用,因此我不必将扩展添加到我的 require 语句中。我尝试通过 budo 的 browserify 选项传递这些命令
budo src/app.coffee --live --serve bundle.js -- -t coffeeify --extension=".coffee"
budo src/app.coffee --live --serve bundle.js -- -t [coffeeify --extension=".coffee"]
我还尝试将 browserify 转换插入我的 package.json
"browserify: { "transform": ["coffeeify", {"extension": ".coffee"}] }
这是对我有用的东西(我花了很长时间才弄明白,最困难的部分是让 watchify 与 coffeescript 一起工作)。 一切都在package.yaml。从您的顶级文件夹调用 npm start
,它就可以解决问题。 npm 将所有本地安装的节点二进制文件放入您的 PATH 中(它们通常位于 node_modules/.bin
下)。
{
"name": "my-package",
"version": "1.0.0",
"private": true,
"scripts": {
"start": "(cd src; budo app.coffee:bundle.js --dir . --live --verbose -- --extension=.coffee | garnish)"
},
"browserify": {
"extension": [ ".coffee" ],
"transform": [ ["coffeeify"], ["brfs"] ]
},
"devDependencies": {
"brfs": "1.4.1",
"browserify": "11.1.0",
"budo": "^5.1.5",
"coffee-script": "latest",
"coffeeify": "^1.1.0",
"garnish": "^3.2.1",
"watchify": "3.4.0"
}
}
我的源代码位于 src 文件夹下,还有一个名为 app.coffee 的文件,其中包含(或 node.js 术语中的 require
)我的整个应用程序。我的 src 文件夹中有一个 index.html,它通过 html script
标签引用 bundle.js。
- 启动武道的命令在我的package.json里面。它首先进入我的 src 文件夹。
- 诀窍是在 browserify 块中指定一些配置:扩展名 .coffee 需要存在,以及转换列表。我尝试在命令行上设置所有内容,但从未成功
- 调用
npm start
后,因为我将--live
参数传递给budo
,所以一切都像魔术一样工作,edit/saves 我的文档确实会触发浏览器 reload/refresh.
要部署或发布,您可能需要另一个目标以使用 uglify.js 缩小。我仍然有一个分两步手动完成的脚本,第一步调用 browserify,第二步明确调用 uglify.js。
顺便说一下,我听说最新版本的 budo 会为您装饰管道。 另一个技巧是查看 React 人员正在做什么来转换他们的 .jsx 文件,因为它在理论上非常接近 coffeescript 人员需要做的事情。 React 似乎有着巨大的发展势头,所以希望 React 的人会首先解决这些构建问题。