首页新闻找找看学习计划

初入Angular,有几个问题,求前辈们给指点一下

0
[已解决问题] 解决于 2018-05-28 08:56

以前都是强行各种JQuery,bootstrap,以及各各种控件,不是职业前端,属于后端客串+兴趣。

最近开始学习Angular4,刚刚入坑。看了一周的Angular4教程

Angular 4.x 修仙之路

准备开始着手实践点东西。

但是一开始就遇到了问题,以前用过的UI框架都是依赖JQuery和Bootstrap写的。还有大量的框架JS和第三方JS插件。

起初我直接在初始页面上跟原来一样使用<script>引用了所需要的js文件,倒是项目没有报错。可以启动,隐约觉得这不是正确的姿势。

百度了一下,基本是说要把js注册到Angular-cli里的,也有说写.d.ts声明文件的。我用的是dotnet core创建的Angular模板,没有啥Angular-cli,这个要手动自己加么?

最大的问题是Js,不是说ts里不能直接引用JS么?要把JS翻译成ts,要是我自己写的JS还好,那ui上的JS还是压缩过的,我咋改啊?

尝试过了把js文件后缀改成ts,使用 tsc --declaration  来给生成声明文件,但是基本上是满篇的error。

 

难道换到angular以后,以前所有的前端代码都要重写么?请大神赐教。

写代码的相声演员的主页 写代码的相声演员 | 小虾三级 | 园豆:551
提问于:2018-05-15 11:35
< >
分享
最佳答案
0

 

起初我直接在初始页面上跟原来一样使用<script>引用了所需要的js文件

这种姿势是正确的,不要随便的把没有模块化的 js 代码添加到 webpack 的打包过程中,因为里面的 webpack 混淆功能可能会让你原来的 js 组件挂掉。

要把JS翻译成ts,要是我自己写的JS还好,那ui上的JS还是压缩过的,我咋改啊?

如果要在 angular 里面调用挂在 window 下面的插件A,你可以用下面的方式

interface window {
    pluginA:any;
}

那么怎么使用 jQuery 呢?首先安装 jQuery 的类型定义文件:

npm i -D @types/jquery

然后你应该就可以在 TS 里y面获得 jQuery 的智能感知了(如果你用的 vscode 的话),但是这个步骤并没有把 jQuery 打包进最后产生的 bundle,你还是需要像原来一样在页面通过 script 标签引入 jQuery。

如果没有智能感知出现的话,请把下面一段代码加入到 tsconfig.json 文件中:

"typeRoots": [
  "../node_modules/@types"
]

 那么怎么在 TS 里面像调用 TS 文件一样调用 jQuery 插件 B 呢?你需要加入下面的定义:

 

interface JQuery {
    pluginA(options:any):void;
}

然后你就在 TS 里面得到了对这个 jQuery 插件的智能感知。同样的这个操作并没有把这个插件打包进输出的内容,你还是需要像之前一样在页面上用 script 导入。

如果你发现上面的代码在运行时出错了,说xxx is undefined,特别是调用 jQuery 相关的方法时,这很有可能是 webpack 把你代码里面的 $ 给混淆了,这样的话,你需要在 webpack 里面做一点单独的配置:

module.exports = {
   // ... 省略了其他的配置
   externals: {
        jquery: 'jQuery'
    },
}

然后你就可以在 TS 里面:

import $ from 'jQuery'; // 这样可以避免 webpack 把 jQuery 混淆后找不到 jQuery 定义的问题,其他插件同理

 

 

奖励园豆:5
不如隐茶去 | 小虾三级 |园豆:544 | 2018-05-27 22:24
其他回答(1)
0

不过不是项目要求,建议还是学习react、vue,市场需求更多一些。

annpaul | 园豆:85 (初学一级) | 2018-05-28 09:52
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册