在项目搭建过程中主要参考https://blog.csdn.net/inthuixiang/article/details/82838969和ES6彩票项目的视频
1.更换npm源
国内直接使用 npm 的官方镜像是非常慢的,所以在这里使用淘宝源
npm install -g cnpm --registry=https://registry.npm.taobao.org
在更换淘宝源之后使用进行包的安装
cnpm install [name]
2. .babel文件的建立
在windows当我们想通过桌面形式或者命令行模式下创建都会出现问题,利用git bash切换到项目根目录进行创建
cd / (项目所在根目录) touch .babelrc
3.所参考的博客中,作者存在笔误:
正确的命令应该是
cnpm install require-dir --save-dev
4.版本不同带来的问题,个人使用的包的版本如下:
"devDependencies": { "@babel/core": "^7.4.0", "@webassemblyjs/floating-point-hex-parser": "^1.8.5", "@webassemblyjs/helper-api-error": "^1.8.5", "@webassemblyjs/helper-code-frame": "^1.8.5", "@webassemblyjs/helper-fsm": "^1.8.5", "babel-core": "^6.26.3", "babel-loader": "^8.0.5", "babel-preset-env": "^1.7.0", "babel-preset-es2015": "^6.24.1", "del": "^4.0.0", "gulp": "^4.0.0", "gulp-concat": "^2.6.1", "gulp-if": "^2.0.2", "gulp-live-server": "^0.0.31", "gulp-livereload": "^4.0.1", "gulp-plumber": "^1.2.1", "gulp-rename": "^1.4.0", "gulp-sequence": "^1.0.0", "gulp-uglify": "^3.0.2", "gulp-util": "^3.0.8", "require-dir": "^1.2.0", "vinyl-named": "^1.1.0", "webassemblyjs": "^1.8.5", "webpack": "^4.29.6", "webpack-stream": "^5.2.1", "yargs": "^13.2.2"
}
因为我是用的版本较新,gulp为v4.0.0,webpack为v4.29.6,因此,在命令执行过程中出现了一些问题:
在执行gulp --watch 命令时报了各种各样的错
其实,解决这个问题很简单,并不用去修改scripts.js中的loaders,只要将app/js文件夹下的index.js文件删除就可以解决问题,但具体是什么原因还不清楚,希望大佬可以回答。
将index.js文件删除后,运行结果如下
进入浏览器测试
原文地址:https://www.cnblogs.com/iamsmiling/p/10628451.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。