我所理解的简单的项目结构

2018-04-15 admin
  • 不急,先听我唠会嗑~
  • 随着js发展的如此迅速,市场上越来越多的前端框架可以方便开发者使用。

  • 本人大四渣渣一名,先后实习了两个地方,第一家公司用vuejs,实话我实习前没学过,到了那开始学的,我觉得上手并不难,会用也不难,看了三天文档,我就自己做了公司移动端的一个项目,页面处理逻辑处理调接口导数据展示,其实和react很类似。但那时深入的原理我了解的不够,人嘛,总是这样子的,有的人学到了精通才开始做项目,有的人比如我这种渣渣就喜欢先上手了看好不好用,在深入去学。当然我推荐刚开始学的小朋友先学原理哈哈。然后呢,第二个公司应该也就是我毕业后要去的公司,在那呢,我用的react,可能学react的人本来就多,我在学校的时候就稍微深入了解了一些,所以实习的时候基本上会用,忘了的就百度嘛,脑子就这么大,记这么多知识也不行,我还得记者我爸我妈的生日,还得记得我姐妹喜欢的口红牌子唉不扯远了,我的意思是,基础得有,不然面试的时候就过不去,但并不是什么都的记得一清二楚,有的时候查一查可能比你想来得快。(当然人的脑容量不同,也有一些过目不忘的大神嘻嘻)

  • 我身边好多学弟学妹问我,学姐你觉得学什么框架好,其实吧,无论用哪一种都有他自己的优缺点,怎么评价一个前端攻城狮呢,你不能说他react多厉害,他就有多强,他不会react你就觉得他很low,万一人家是个vue大神,不惜的用怎么办,哈哈。还有些逻辑差一点但人家页面处理超级快,一天做个10多个页面那种(实习遇到的一个小姐姐)。对了我觉得就像打篮球,控球很好但投不准的人也有,投的很准控球不好的人也有,像科比一样完美的人也有(哈哈我高中时科比的迷妹),赢才是关键,算了还是不打比方了,反正就是没有什么标准来评价,只要能做完需求我觉得就够了

  • 总结了下两次实习项目前端的基础结构
  • 根目录下: 文件夹dir : idea 、build 、 node_modules、 src ; 文件:webpack.dev.config.js 、 webpack.prod.config.js 、 .babelrc 、 .project 、package.json ...等等

简单介绍一下:

idea文件夹 里一般存放一些项目的配置文件,版本的控制文件等等
build文件夹  npm run build 打包后生成的文件
node_modules文件夹 npm install ... 下载一些相关依赖配置
src文件夹 主要的逻辑处理代码都写在这~下面还会分jsx\css\image等等

webpack.dev.config.js 配置文件(本地环境),这个大家应该用过的都知道
webpack.prod.config.js 配置文件(测试/开发环境)
.babelrc 设置转码规则
.project 一般用来定义项目结构
package.json 是npm init 后生成的记录着一些信息作者依赖等...

webpack.dev.config.js

const path = require( "path" );
const webpack = require( "webpack" );
const ExtractTextPlugin = require( "extract-text-webpack-plugin" );
const HtmlWebpackPlugin = require( "html-webpack-plugin" );
const CleanWebpackPlugin = require( 'clean-webpack-plugin' ); //用来清空文件
const CopyWebpackPlugin = require( "copy-webpack-plugin" ); //复制文件或文件夹

module.exports = function ( env ) {
    let set = {
        devtool: "inline-source-map",
        entry: {
            index: "./src/jsx/index.jsx", //首页
            vendor: [ "react", "react-dom", "zepto" ]
        },
        output: {
            path: path.resolve( __dirname, "build" ),
            // publicPath: "/",
            filename: "[name].js" 
        },
        resolve: {
            extensions: [ ".jsx", ".js", ".es6", ".json" ]
        },
        module: {
            rules: [
                {
                    test: require.resolve( 'zepto' ),
                    loader: 'exports-loader?window.Zepto!script-loader'
                },
                {
                    test: /\.jsx$/,
                    use: "babel-loader",
                    include: path.resolve( __dirname, "src" ) //Webpack2建议尽量避免exclude,更倾向于使用include。
                },
                {
                    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                    use: [ {
                        loader: "url-loader",
                        options: {
                            limit: 5000,
                            name: 'images/[name].[ext]' // 将图片都放入images文件夹下
                        }
                    } ]
                },
                {
                    test: /\.(woff2?|eot|woff|ttf|otf)(\?.*)?$/,
                    use: [ {
                        loader: "url-loader",
                        options: {
                            limit: 5000,
                            name: 'fonts/[name].[ext]'
                        }
                    } ]
                },
                {
                    test: /\.css$/,
                    use: ExtractTextPlugin.extract( {
                        fallback: "style-loader",
                        use: [ "css-loader", "postcss-loader" ]
                    } )
                },
                {
                    test: /\.styl$/,
                    use: ExtractTextPlugin.extract( {
                        use: [ "css-loader", "postcss-loader", "stylus-loader" ]
                    } )
                },
                {
                    test: /\.less$/,
                    use: ExtractTextPlugin.extract( {
                        use: [ "css-loader", "postcss-loader", "less-loader" ]
                    } )
                }
            ]
        },
        plugins: [
            new ExtractTextPlugin( {
                filename: "[name].css"
            } ),
            new webpack.DefinePlugin( {
                'process.env': {
                    NODE_ENV: '"production"'
                }
            } ),
            new webpack.optimize.CommonsChunkPlugin( {
                name: 'vendor' // 指定公共 bundle 的名字。
            } ),
            new webpack.ProvidePlugin( {
                $: 'zepto'
            } ),
            new CleanWebpackPlugin( //匹配删除的文件
                [
                    path.resolve( __dirname, "build" ) + "/*.js",
                    path.resolve( __dirname, "build" ) + "/*.css",
                    path.resolve( __dirname, "build/images" ) + "/*"
                ], {
                    root: __dirname, //根目录
                    verbose: true, //开启在控制台输出信息
                    dry: false  //启用删除文件
                }
            ),
            new CopyWebpackPlugin( [ {
                from: path.resolve( __dirname, "src/images" ),
                to: path.resolve( __dirname, "build/images" )
            }, {
                context: path.resolve( __dirname, "src/jslib" ),
                from: "*.js",
                to: path.resolve( __dirname, "build/jslib" )
            }, {
                context: path.resolve( __dirname, "src/customstyle" ),
                from: "*.css",
                to: path.resolve( __dirname, "build/customstyle" )
            } ] )
        ]
    };

    Object.keys( set.entry )
        .forEach( v => {
            v != "vendor" && set.plugins.push(
                new HtmlWebpackPlugin( { 
                    filename: v + ".html", 
                    template: "./src/template.html", 
                    chunks: [ 'vendor', v ], 
                    inject: true //插入开关
                } )
            )
        } );
    return set;
};
package.json

{
    "name": "livia",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "dev": "cross-env NODE_ENV=dev webpack-dev-server --hot --open",
        "build": "cross-env NODE_ENV=release webpack --progress --colors"
    },
    "keywords": [],
    "author": "livia",
    "license": "ISC",
    "devDependencies": {
        "autoprefixer": "^6.7.7",
        "babel-core": "^6.25.0",
        "babel-loader": "^6.4.1",
        "babel-plugin-transform-react-jsx": "^6.24.1",
        "babel-preset-es2015": "^6.24.1",
        "clean-webpack-plugin": "^0.1.16",
        "copy-webpack-plugin": "^4.0.1",
        "cross-env": "^5.0.1",
        "css-loader": "^0.26.4",
        "cssnano": "^3.10.0",
        "exports-loader": "^0.6.4",
        "extract-text-webpack-plugin": "^2.1.2",
        "file-loader": "^0.9.0",
        "html-webpack-plugin": "^2.28.0",
        "less": "^2.7.2",
        "less-loader": "^4.0.5",
        "postcss-loader": "^1.3.3",
        "script-loader": "^0.7.0",
        "style-loader": "^0.13.2",
        "stylus": "^0.54.5",
        "stylus-loader": "^3.0.1",
        "url-loader": "^0.5.9",
        "webpack": "^2.6.1",
        "webpack-dev-server": "^2.5.0"
    },
    "dependencies": {
        "hcz-native-bridge": "^0.1.5",
        "react": "^15.6.1",
        "react-dom": "^15.6.1",
        "react-mobile-datepicker": "^3.0.4",
        "react-pullload": "^1.0.6",
        "zepto": "^1.2.0"
    }
}


说一些可能没用的~

  • (站在前端角度不懂的很多) 很多时候一个项目都是由一个小组完成的,小组成员可能包括产品,ui,前端,后端,测试,运营等等。
  • 立项前会进行一些评估(可行性分析,风险测评,BRD/MRD等等)
  • 立项后,产品经理组织各部门召开需求会议,梳理需求建立初步产品原型,经过一系列的讨论调整确定最终产品原型后,ui根据此做出ui设计图,前后端联调接口,前端根据ui设计图和后端提供的入参反参接口实现页面逻辑功能,通过一系列测试后才能实现。

今天先说个大概,等哪天心情好了再说多一些我会的小分享~

原文链接:https://segmentfault.com/a/1190000014368451

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-27591.html

文章标题:我所理解的简单的项目结构

相关文章
12个你未必知道的CSS小知识
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过。 1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员...
2015-11-12
ajax为什么令人惊异?ajax的优缺点
使用Ajax的最大优点,就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作,并避免了在网络上发送那些没有改变的信息。 Ajax不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。就像DHT...
2015-11-12
HTML5的5个不错的开发工具推荐
HTML5规范终于在今年正式定稿,对于从事多年HTML5开发的人员来说绝对是一个重大新闻。数字天堂董事长,DCloud CEO王安也发表了文章,从开发者和用户两个角度分析了HTML对两个人群的优势。其实,关于HTML5的开发工具,我们以往的...
2015-11-12
JavaScript教程:JS中的原型
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
2015-11-12
AJAX的浏览器支持
AJAX 的要点是 XMLHttpRequest 对象。 不同的浏览器创建 XMLHttpRequest 对象的方法是有差异的。 IE 浏览器使用 ActiveXObject,而其他的浏览器使用名为 XMLHttpRequest 的 Jav...
2015-11-12
Riot.js:不足1KB的MVP客户端框架
Riot.js是一款MVP(模型-视图-呈现)开源客户端框架,其最大的特点就是体积非常小,不足1KB,虽然体积小,但它可以帮助用户构建大规模的Web应用程序。 Riot.js是由Moot公司开发,目前最新版本为v0.9.2,遵循MIT开源许...
2016-03-11
typeof、instanceof和contructor的区别
typeof:以字符串的形式返回变量的原始类型,typeof在两种情况下会返回"undefined":一个变量没有被声明的时候,和一个变量的值是undefined的时候,注意,typeof null也会返回object,...
2015-11-12
JavaScript的组成
一个完整的JavaScript由3个部分组成:核心(ECMAScript) 文档对象模型(DOM) 浏览器对象模型(BOM) ECMAScript 描述了该语言的语法和基本对象 ; DOM 描述了处理网页内容的方法和接口 ; BOM 描...
2015-11-12
必须记住的 30 类 CSS 选择器
开篇 有 30 个 CSS 选择器你必须烂熟于心,它们适应于当今各大主流浏览器。 1.* * { margin: 0; padding: 0; } *选择器选择的是每一个单一元素。很多程序员用上面的 CSS 将所有元素的 ma...
2015-11-16
JavaScript变量的声明
声明变量 变量在脚本中的首次亮相是在其声明中。 在变量首次出现时将会在内存中设置它,因此您稍后可在脚本中引用它。 应在使用变量之前先声明变量。 可以使用 var 关键字实现此目的。 <span id=“mt9” class=“sent...
2015-11-12
回到顶部