ES6项目构建踩坑笔记

在项目搭建过程中主要参考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.版本不同带来的问题,个人使用的包的版本如下:

扫描二维码关注公众号,回复: 5716349 查看本文章
 "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文件删除后,运行结果如下

 进入浏览器测试

 

猜你喜欢

转载自www.cnblogs.com/iamsmiling/p/10628451.html