当前位置: 澳门新濠3559 > 编程 > 正文

 所以引入的文件有点多,把工程自动生成的js代

时间:2019-11-29 05:50来源:编程
  这次做项目,从中得到了很多,和比我优秀的同事的一块,感觉受益多多,这几天也要慢慢把从项目中学到的东西整理下来,以防自己记不住,博客园真的是我的宝典,哈哈。。 有

   这次做项目,从中得到了很多,和比我优秀的同事的一块,感觉受益多多,这几天也要慢慢把从项目中学到的东西整理下来,以防自己记不住,博客园真的是我的宝典,哈哈。。

有一次观摩了前端同事的代码后,对ts+mobx的架构很感兴趣,然后就开始了ts的使用旅程。
在网上浏览了很多帖子教程,但是问题很多,各种报错,后来还是觉着找官方靠谱,于是就到了这个地址:
https://github.com/Microsoft/TypeScript-React-Native-Starter#typescript-react-native-starter
1.创建ReactNative工程

项目地址:

   我从同事那拿来一个时间查询的插件,先记录下来:

react-native init MyAwesomeProject

今天上午和同事完成了在mac上面调试了我的框架,最后发现问题出在window系统和mac系统在表示路径的时候出现问题,在解决这个问题后,在同事的建议下,对项目的目录做了一个优化,把所有的资源文件放在assets目录,打包后去掉了一层pro目录这样看上去清爽了很多,下午开始了最坑爹的热替换。

首先要引入js文件和css文件,因为我用到了bootstrap  所以引入的文件有点多:ps: 如果有需要的小伙伴,可以直接跟我说

2.创建源代码文件夹,把工程自动生成的js代码也迁移到src目录下,至于这个目录其实可以自定义的,也可以按照自己的方式来:

热替换其实很早就开始研究了,但是一直没有头绪,今天是要必须解决了,具体解决方式:

 

mkdir src
mv *.js src

1:我决定单独把热替换的配置代码写在一个文件里,然后在package里面配置一下就可以直接运行这个文件了:"test": "node dev-server",这样我npm test 实际上运行的是dev-server文件,我dev-server文件里面主要是写了热替换的代码

<script src="jquery-1.11.2.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="moment.js"></script>
<script src="daterangepicker.js"></script>


<link href="bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="daterangepicker-bs3.css" rel="stylesheet" type="text/css" />
<link href="http://www.jq22.com/jquery/font-awesome.4.6.0.css"rel="stylesheet">

3.搭建TypeScript环境

2:dev-server文件这里面用WebpackDevServer来定义访问地址和监听端口,然后我就npm start运行啊,想要看到理想中的效果啊,但是现实是残酷的,并美誉热替换

 

npm install -g typescript

3:继续找啊,终于让我找到了,一片文章说可以在html手动引入<script type="text/javascript" src=" 有一个警告,上面说我的vue-loader只适合vue1.0,我咨询了我的同事,我同事说他也遇到这种问题,说vue-loader 9.0一下只支持vue1.0,9.0以上支持vue2.0,我高兴啊 立刻更新了vue-loader到最新的11.0.0,然而奇迹并没有发生。

下面是div部分:

4.创建typescript配置文件tsconfig.json,在项目根目录(与node_modules平级)下执行下述命令

4:又来一个错,说我的vue的版本和vue-temeplete-compiler版本不一致(欲哭无泪),继续寻找解决方案,又有一片文章说也遇到这种问题,他的解决方案是强制使vue和vue-temeplte-compiler的版本一致,于是我就强制指定啊 指定为2.0.9,终于解决了,不报错了

<div class="col-xs-12"><!--日期查询组件-->
    <label class="col-sm-1 control-label tj">发布时间:</label>
    <div class="col-xs-4 tj">
        <form class="form-horizontal">
            <fieldset>
                <div class="control-group">
                    <div class="controls">
                        <div class="input-prepend input-group">

                                <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
                            <input type="text" readonly style="width: 200px" name="reservation" id="reservation"
                                   class="form-control" value="请选择查询日期" />
                        </div>

                    </div>
                </div>
            </fieldset>
        </form>
    </div>
</div>
tsc --init --pretty --sourceMap --target es2015 --outDir ./lib --module commonjs --jsx react

5:我欢天喜地的准备开始热替换,fuck!!!!编译又通不过了,压缩出现问题。。。。。,我咨询了我的同事,幸好她也遇到这种问题,他发给我一个文件.babelrc放在根目录,我放进去后继续打包,我擦 竟然通过了,666

最后是JS部分:

5.经前端同事建议需要加上一些依赖库,修改tsconfig.json

6:终于可以热替换了,但是好像我的webpack.config.js是手动写在html里面的,那项目大了几十个页面难不成我要一个个写吗,这肯定不行啊,继续寻找解决方案,已经快吐血了,找到一篇文章,作者说可以通过写一个webpack插件,在插件里面监听HtmlWebpackPlugin事件,在他写入js文件的时候,我把我手动写的一条js引用路径加上去(原谅我说的不清楚,因为我也不是很懂。。。。。

 <script type="text/javascript">
        //日期查询js组件
        $(document).ready(function() {
            $('#reservation').daterangepicker(null, function(start, end, label) {
                console.log(start.toISOString(), end.toISOString(), label);
            });
        });


        var rqstart = "";
        var rqend = "";
        //日期时间方法
        $(document).ready(function() {
            $('input[name="reservation"]').daterangepicker(
                {
                    /*format: 'YYYY-MM-DD',
                     startDate: '2013-01-01',
                     endDate: '2013-12-31'*/
                },
                function(start, end, label) {
                    //alert('A date range was chosen: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
                    start = start.format('YYYY-MM-DD');//.format()把任意数据转换成字符串
                    end = end.format('YYYY-MM-DD');

                    /*    开始结束时加*/
                    rqstart = start;
                    rqend = end;

                }
            );
        });

    </script>
"lib": ["dom", "es2015", "es2016", "es2017"], 

7:到现在热替换终于可以了,但是我们一般测试的时候不需要压缩,生产环境不需要引入那个热替换的js,所以肯定要分生产环境和测试环境啊,我有一个思路,就是package里面的scripts里面可以预设一些脚本命令,于是我在里面写了一个test这个主要是执行我的测试环境,写了一个start里面主要是执行我的生产环境,然后测试环境和上产环境的配置文件分两个。。。。。。

图片 1

6.另外还要额外增加tsx、ts文件路径和不引入路径

8:到此差不多可以了,解决了心头大患,但是还是有瑕疵的 第一个就是运行测试环境前 前提是运行一次生产环境。。。。第二个就是我引入的base.css目前还不能添加版本号。。。。

效果如上图所示

"include": [
    "typings/**/*.d.ts",
    "src/**/*.ts",
    "src/**/*.tsx"
  ],
"exclude": [
    "node_modules"
  ]

 

7.我的最终tsconfig.json的配置如下:

{
  "compilerOptions": {
    "target": "es6",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'. */
    "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
    "lib": ["dom", "es2015", "es2016", "es2017"],                             /* Specify library files to be included in the compilation:  */
    "jsx": "react",                           /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
    "sourceMap": true,                        /* Generates corresponding '.map' file. */
    "outDir": "./lib",                        /* Redirect output structure to the directory. */
    "strict": true                            /* Enable all strict type-checking options. */
  },
  "include": [
    "typings/**/*.d.ts",
    "src/**/*.ts",
    "src/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

8.增加node_modules下的依赖

npm install --save-dev @types/jest @types/react @types/react-native @types/react-test-renderer

9.修改js文件后缀为tsx,另外ts下部分语法有变化,原文如下

Replace import React, {Component} from 'react'; with import * as React from 'react';
Replace import renderer from 'react-test-renderer'; with import * as renderer from 'react-test-renderer';
Rewrite imports from import Index from '../index.ios.js'; to import Index from '../index.ios';, and likewise for Android. In other words, drop the .js extension from your imports.

10.修改类定义方法

export default class App extends Component<{}>
修改为:
export default class App extends React.Component<any, any>
或者
export default class App extends React.Component

11.由于文件路径发生了变话,需要修改native工程下的url路径:

jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];

修改为:

jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"lib/index" fallbackResource:nil];

12.最后一步,需要编译ts到js

tsc

如果有错误,可以参照报错去修改。

编辑:编程 本文来源: 所以引入的文件有点多,把工程自动生成的js代

关键词: